•  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
더 보기
로그인이 되지 않는 경우 최근 변경 페이지에서 로그인을 시도해 주세요.

엔트리위키:문법 도움말/심화(r2 Blame)

r2
r2
NightZ
1[[분류:엔트리위키의 도움말]]
2[include(틀:상위 문서, 문서명1=엔트리위키:문법 도움말)]
3[include(틀:하위 문서, 문서명1=엔트리위키:문법 도움말/심화/TeX)]
4[include(틀:엔트리위키)]
5[include(틀:엔트리위키 도움말)]
r1
NightZ

(새 문서) 		6[목차]
7== 개요 ==
r2
NightZ
8[[엔트리위키]]의 문법 중 응용 문법, 특수한 상황에 사용되는 문법, 난도가 높은 문법들을 설명합니다. 편집에 필수적으로 필요한 기본 문법들은 [[엔트리위키:문법 도움말|상위 문서]]에 안내되어 있으니 심화 문법을 보기 전에 기초 내용을 먼저 숙지하시는 것을 권장합니다.
r1
NightZ

(새 문서) 		9
10== \{{{#!wiki }}} 구문을 활용한 CSS 적용 ==
11{{{{{{#!wiki }}}}}} 구문에서, style 선언과 dark-style 선언을 사용하여 [[CSS]]의 많은 속성을 적용시킬 수 있습니다. 다만, 후술하다시피 모든 속성과 함수를 적용하고 사용할 수 있는 것은 아닙니다. 기본 형식은 아래와 같으며 선언 다음에 '''개행을 생략하면 정상적으로 출력되지 않습니다.'''
12{{{{{{#!wiki style="속성들" dark-style="다크모드 전용 속성들"
13속성이 적용된 내용}}}}}}
14{{{속성들}}} 부분은 "{{{속성명1: 값1; 속성명2: 값2;}}}" 와 같은 방식으로 구성되며, 각 속성의 항목은 [[세미콜론]]({{{;}}})으로 끝납니다. 즉, 여러 속성끼리는 {{{;}}} 문자로 구분합니다. 자세한 내용에 대해서는 [[CSS]] 문서의 [[CSS#문법|문법]] 문단을 참고하시기 바랍니다.
15
r2
NightZ
16[[엔트리위키:테마|다크모드]] 전용 선언인 dark-style인 경우 style 선언도 그대로 적용되고 다크모드 모드인 경우 추가적으로 해당 선언이 적용됩니다. 기존 style 선언이랑 겹치는 경우 dark-style 선언이 우선시됩니다.
r1
NightZ

(새 문서) 		17||<tablebgcolor=transparent><colbgcolor=#f5f5f5><rowbgcolor=#f5f5f5><rowkeepall><colkeepall>[include(틀:대각선 테두리, 상=,)]|| style 선언 || dark-style 선언 ||
18|| 라이트모드 || 1순위 적용 || 비적용 ||
19|| 다크모드 || 2순위 적용 || 1순위 적용 ||
r2
NightZ
20본 문단의 하위 항목인 '텍스트 정렬 및 자간 조절', '줄바꿈 기준 설정', '텍스트 및 셀 배경의 그라데이션 효과' 뿐 아니라, 후술되는 '이미지/동영상 삽입 관련 고급 문법', '인용문 정렬 문법', '접기 시 미관 개선용 문법'은 CSS에 존재하는 다양한 속성 중 일부을 엔트리위키의 필요성에 맞게 활용한 예시들입니다. 따라서 자세한 내용은 CSS에 관련된 외부 자료를 참고하시기 바랍니다.
r1
NightZ

(새 문서) 		21
22단, {{{{{{#!wiki }}}}}} 문법으로 문단 문법(== 문단 ==)을 감쌀 수 없습니다. 문단 내에서 {{{{{{#!wiki }}}}}} 문법을 사용하시기 바랍니다.
23
24{{{{{{#!wiki lang="(언어 코드)"
25속성이 적용된 내용}}}}}}
26추가로 [[https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/lang|lang 속성]]을 \{{{#!wiki }}} 구문에 적용할 수 있습니다. {{{언어 코드}}}에는 '''ko(한국어)''', '''ja(일본어)''', '''zh(중국어)''' 등을 입력할 수 있습니다. 이와 관련한 내용은 [[틀:zh/설명 문서#s-3|틀:zh의 설명문서의 글꼴 지정이 필요한 이유]]를 참고하세요.
27
28{{{#red '''주의'''}}}: {{{{{{#!wiki }}}}}} 구문은 기본적으로 {{{block}}}(줄 전체를 차지하는) 요소로 취급됩니다. 줄 전체를 차지하는 것이 싫으시다면 style 선언에 {{{display: inline;}}}을 추가하는 등의 방법으로 해결해야 합니다.
29
30{{{#red '''주의'''}}}: {{{<div>}}} 태그를 제외한 HTML의 다른 모든 태그, 특히 {{{<span>}}} 태그를 사용하는 문법은 정식 문법이 아니며 가능한 한 사용을 자제할 것이 요구됩니다. {{{{{{#!wiki style= ...}}}}}}로 시작하지 않고, {{{{{{#!html ...}}}}}}로 시작하는 모든 문법은 모두 비권장이라 보시면 됩니다. 이에 관해서는 [[#html|별도 문단]]에서 설명합니다.
31
r2
NightZ
32{{{#red '''주의'''}}}: 전술하였다시피, 모든 CSS 속성들이 사용 가능한 것은 아닙니다. 일부 CSS 속성 및 함수의 경우 보안 등의 문제로 인해 지원하지 않으며, 사용하려고 해도 속성이 적용되지 않습니다. 이에 대해서는 CSS 문서 내 [[CSS#s-4.2.1|엔트리위키에서 사용 가능한 속성]] 문단을 참고하시기 바랍니다.
r1
NightZ

(새 문서) 		33
34=== 텍스트 정렬 ===
r2
NightZ
35[include(틀:다른 뜻, 넘어옴1=가운데 정렬, 설명1=테이블 정렬, 문서명1=엔트리위키:문법 도움말, 앵커1=테이블 정렬)]
r1
NightZ

(새 문서) 		36텍스트를 정렬할 수 있으며 형태, 크기, 색상과 병용할 수 있습니다. 기본값은 좌측 정렬입니다.
37{{{{{{#!wiki style="text-align: center"
38중앙}}}}}}
39||<tablewidth=100%><tablebgcolor=transparent> {{{#!wiki style="text-align: center"
40↓}}}{{{#!wiki style="text-align: center"
41중앙}}} ||
42----
43{{{{{{#!wiki style="text-align: left"
44좌측}}}}}}
45||<tablewidth=100%><tablebgcolor=transparent> {{{#!wiki style="text-align: left"
46↓}}}{{{#!wiki style="text-align: left"
47좌측}}} ||
48----
49{{{{{{#!wiki style="text-align: right"
50우측}}}}}}
51||<tablewidth=100%><tablebgcolor=transparent> {{{#!wiki style="text-align: right"
52↓}}}{{{#!wiki style="text-align: right"
53우측}}} ||
54
55=== 텍스트 자간 조절 ===
56{{{{{{#!wiki style="letter-spacing: 값px"
57텍스트}}}}}}
58텍스트의 [[자간]]을 조절하여 공간을 절약하거나 가독성을 향상시킬 수 있습니다. 기본값은 0px입니다.
59
60[[템플릿]], [[틀]], [[표(자료)|테이블(표)]] 등에서 미관상의 목적으로만 사용하여 주십시오.
61||<rowbgcolor=#fc6><rowcolor=#000><width=50%> 입력 ||<colkeepall> 출력 ||
62||{{{{{{#!wiki style="letter-spacing: 1.5px"
63텍스트의 자간이 1.5px입니다.}}}}}}
64||{{{#!wiki style="letter-spacing: 1.5px"
65텍스트의 자간이 1.5px입니다.}}}
66||
67||{{{{{{#!wiki style="letter-spacing: 1px"
68텍스트의 자간이 1px입니다.}}}}}}
69||{{{#!wiki style="letter-spacing: 1px"
70텍스트의 자간이 1px입니다.}}}
71||
72||{{{{{{#!wiki style="letter-spacing: 0.5px"
73텍스트의 자간이 0.5px입니다.}}}}}}
74||{{{#!wiki style="letter-spacing: 0.5px"
75텍스트의 자간이 0.5px입니다.}}}
76||
77||{{{{{{#!wiki style="letter-spacing: 0px"
78텍스트의 자간이 기본값입니다.}}}}}}
79||{{{#!wiki style="letter-spacing: 0px"
80텍스트의 자간이 기본값입니다.}}}
81||
82||{{{{{{#!wiki style="letter-spacing: -0.5px"
83텍스트의 자간이 -0.5px입니다.}}}}}}
84||{{{#!wiki style="letter-spacing: -0.5px"
85텍스트의 자간이 -0.5px입니다.}}}
86||
87||{{{{{{#!wiki style="letter-spacing: -1px"
88텍스트의 자간이 -1px입니다.}}}}}}
89||{{{#!wiki style="letter-spacing: -1px"
90텍스트의 자간이 -1px입니다.}}}
91||
92||{{{{{{#!wiki style="letter-spacing: -1.5px"
93텍스트의 자간이 -1.5px입니다.}}}}}}
94||{{{#!wiki style="letter-spacing: -1.5px"
95텍스트의 자간이 -1.5px입니다.}}}
96||
97
98=== 줄바꿈 기준 설정[anchor(줄바꿈 기준 설정)] ===
99틀, 표, 인용문 박스 등 특정 영역의 가장자리에서 텍스트가 줄바꿈 될 때의 기준을 다음 문법을 통해 설정하여 가독성을 향상시킬 수 있습니다.
100{{{{{{#!wiki style="word-break: (조건값)"
101(텍스트)}}}}}}
102줄바꿈 조건값으로 입력할 수 있는 값에는 다음이 있습니다.
103 * {{{normal}}}: 띄어쓰기와 하이픈(-)을 단어 구분의 기준으로 '''[[라틴 문자]](로마자)의 단어 단위''' 줄바꿈
104 * {{{keep-all}}}: 띄어쓰기와 하이픈(-)을 단어 구분의 기준으로 '''모든 문자(한글 포함)의 단어 단위''' 줄바꿈
105 * 표 안 텍스트의 경우 {{{wiki style}}}을 사용하지 않은 기본 문법인 {{{<keepall>, <rowkeepall>, <colkeepall>}}} 사용을 권장합니다.
106 * {{{break-all}}}: '''글자 단위''' 줄바꿈
107
r2
NightZ
108{{{#green '''참고'''}}}: 이 문법을 따로 사용하지 않았을 경우의 엔트리위키 기본값은 글자 단위 줄바꿈({{{break-all}}}) 입니다.
r1
NightZ

(새 문서) 		109
110이 문법을 사용하여 해당 영역에서 전체적으로 단어 단위로 줄바꿈을 적용할 시, 예외적으로 일부 단어에 대해서만 단어 내 특정한 위치에서 줄바꿈을 적용하려면 그 위치에 [[공백#s-2.3|폭 없는 공백(Zero Width Space, U+200B)]]을 삽입하면 됩니다. 폭 없는 공백은 그냥 복사해서 붙여넣으면 나중에 RAW에서 찾기 어려워지니 {{{{{{#!html &ZeroWidthSpace;}}}}}} 또는 {{{{{{#!html &#8203;}}}}}}과 같이 HTML을 사용한 방법이 좋습니다.
111----
112
113다음은 예시입니다.
114
r2
NightZ
115||<bgcolor=#fc6><rowcolor=#000>'''{{{word-break: break-all}}} 사용 (엔트리위키 기본값, 글자 단위로 줄바꿈)'''||
r1
NightZ

(새 문서) 		116||{{{|| Out of the frying pan into the fire. 여우를 피해서 호랑이를 만나다. || Saying is one thing, doing is another. 말은 쉬워도 행동은 어렵다. || The fish always stinks from the head downwards. 윗물이 맑아야 아랫물이 맑다. || The sparrow near a school sings the primer. 서당개 삼 년에 풍월 읊는다. || The mouse that has but one hole is quickly taken. 구멍 하나 뿐인 쥐는 빨리 잡힌다. || Still waters run deep. 잔잔한 물은 깊이 흐른다. || What's learned in the cradle is carried to the grave. 요람에서 배워 무덤까지 간다. ||}}}||
117
118||Out of the frying pan into the fire. 여우를 피해서 호랑이를 만나다. || Saying is one thing, doing is another. 말은 쉬워도 행동은 어렵다. || The fish always stinks from the head downwards. 윗물이 맑아야 아랫물이 맑다. || The sparrow near a school sings the primer. 서당개 삼 년에 풍월 읊는다. || The mouse that has but one hole is quickly taken. 구멍 하나 뿐인 쥐는 빨리 잡힌다. || Still waters run deep. 잔잔한 물은 깊이 흐른다. || What's learned in the cradle is carried to the grave. 요람에서 배워 무덤까지 간다. ||
119----
120
121||<bgcolor=#fc6><rowcolor=#000><tablewidth=100%>'''{{{word-break: normal}}} 사용 (라틴 문자 단어 단위로 줄바꿈)'''||
122||\{{{{{{#!wiki style="word-break: normal"}}}
123{{{|| Out of the frying pan into the fire. 여우를 피해서 호랑이를 만나다. || Saying is one thing, doing is another. 말은 쉬워도 행동은 어렵다. || The fish always stinks from the head downwards. 윗물이 맑아야 아랫물이 맑다. || The sparrow near a school sings the primer. 서당개 삼 년에 풍월 읊는다. || The mouse that has but one hole is quickly taken. 구멍 하나 뿐인 쥐는 빨리 잡힌다. || Still waters run deep. 잔잔한 물은 깊이 흐른다. || What's learned in the cradle is carried to the grave. 요람에서 배워 무덤까지 간다. ||}}}}}}||
124
125{{{#!wiki style="word-break: normal"
126|| Out of the frying pan into the fire. 여우를 피해서 호랑이를 만나다. || Saying is one thing, doing is another. 말은 쉬워도 행동은 어렵다. || The fish always stinks from the head downwards. 윗물이 맑아야 아랫물이 맑다. || The sparrow near a school sings the primer. 서당개 삼 년에 풍월 읊는다. || The mouse that has but one hole is quickly taken. 구멍 하나 뿐인 쥐는 빨리 잡힌다. || Still waters run deep. 잔잔한 물은 깊이 흐른다. || What's learned in the cradle is carried to the grave. 요람에서 배워 무덤까지 간다. ||}}}
127----
128
129||<bgcolor=#fc6><rowcolor=#000>'''{{{word-break: keep-all}}} 사용 (한글을 포함한 모든 문자의 단어 단위로 줄바꿈)'''||
130||\{{{{{{#!wiki style="word-break: keep-all"}}}
131{{{|| Out of the frying pan into the fire. 여우를 피해서 호랑이를 만나다. || Saying is one thing, doing is another. 말은 쉬워도 행동은 어렵다. || The fish always stinks from the head downwards. 윗물이 맑아야 아랫물이 맑다. || The sparrow near a school sings the primer. 서당개 삼 년에 풍월 읊는다. || The mouse that has but one hole is quickly taken. 구멍 하나 뿐인 쥐는 빨리 잡힌다. || Still waters run deep. 잔잔한 물은 깊이 흐른다. || What's learned in the cradle is carried to the grave. 요람에서 배워 무덤까지 간다. ||}}}}}}||
132
133{{{#!wiki style="word-break: keep-all"
134|| Out of the frying pan into the fire. 여우를 피해서 호랑이를 만나다. || Saying is one thing, doing is another. 말은 쉬워도 행동은 어렵다. || The fish always stinks from the head downwards. 윗물이 맑아야 아랫물이 맑다. || The sparrow near a school sings the primer. 서당개 삼 년에 풍월 읊는다. || The mouse that has but one hole is quickly taken. 구멍 하나 뿐인 쥐는 빨리 잡힌다. || Still waters run deep. 잔잔한 물은 깊이 흐른다. || What's learned in the cradle is carried to the grave. 요람에서 배워 무덤까지 간다. ||}}}
135
136=== [anchor(그라데이션)] 셀 배경의 그라데이션 효과 ===
137{{{{{{#!wiki style="background: linear-gradient(<to 방향>, #<헥스 코드 1>, #<헥스 코드 2>)"
138}}}}}}
139이 문법은 글자의 배경에 [[그라데이션]]을 넣는 기능입니다. (텍스트 뿐만 아니라 테이블의 셀 배경으로 적용 또한 가능함) {{{<헥스 코드 1, 2>}}} 자리에 자신이 넣고 싶은 여섯 자리의 [[헥스 코드]]들을 찾아서 입력해 주세요.
140
141그라데이션의 여백을 조절하고 싶다면 위 문법에 {{{margin: (세로 여백 조절 숫자)px (가로 여백 조절 숫자)px; }}}을 추가로 입력하여 조절해 주세요.
142
143그라데이션의 크기를 조절하고 싶다면 위 문법에 {{{padding: (세로 크기 조절 숫자)px (가로 크기 조절 숫자)px; }}}을 추가로 입력하여 조절해 주세요.
144
145그라데이션의 방향을 설정하고 싶다면 {{{<to 방향>}}} 자리에 {{{to left}}}, {{{to right}}}, {{{to top}}}, {{{to bottom}}} 중에서 하나를 입력해 주세요.
146 * 왼쪽에서 오른쪽: {{{to right}}}
147 * 오른쪽에서 왼쪽: {{{to left}}}
148 * 위에서 아래: {{{to bottom}}}
149 * 아래에서 위: {{{to top}}}
150 * 북동쪽 방향 대각선: {{{to top right}}} 또는 {{{to right top}}}
151 * 동남쪽 방향 대각선: {{{to bottom right}}} 또는 {{{to right bottom}}}
152 * 남서쪽 방향 대각선: {{{to bottom left}}} 또는 {{{to left bottom}}}
153 * 북서쪽 방향 대각선: {{{to top left}}} 또는 {{{to left top}}}
154
155그라데이션의 각도를 세세하게 조절하고 싶다면 {{{<to 방향>}}} 대신 육십분법으로 {{{<숫자deg>}}}나 호도법으로 {{{<숫자rad>}}} 문법을 사용해 보세요. {{{숫자}}} 안의 각도를 소수점 아래로 미세한 조정이 가능합니다. 아래는 예시입니다.
156 * 북쪽 방향: {{{0deg}}}
157 * 북동쪽 방향: {{{45deg}}}
158 * 동쪽 방향: {{{90deg}}}
159 * 남동쪽 방향: {{{135deg}}}
160 * 남쪽 방향: {{{180deg}}}
161 * 남서쪽 방향: {{{225deg}}}
162 * 서쪽 방향: {{{270deg}}}
163 * 북서쪽 방향: {{{315deg}}}
164
165상기의 문법을 동시에 사용한 예시입니다.
166{{{{{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #FFB9B9, #FFFDBB)"
167그라데이션 기능입니다}}}}}}
168{{{#!wiki style="margin: -5px 0px; padding: 5px 10px; background: linear-gradient(to right, #FFB9B9, #FFFDBB)"
169{{{#000 그라데이션 기능입니다}}}}}}
170
171또다른 예시입니다.
172
173{{{{{{#!wiki style="padding: 5px 10px; background: linear-gradient(135deg, #FFB9B9, #FFD3B6, #FFFDBB, #B4ECB4, #ACE1FF, #F6C3FF)"
174그라데이션 기능입니다
175
176무지개색 총공격이다!}}}}}}
177{{{#!wiki style="margin: -5px 0px; padding: 5px 10px; background: linear-gradient(135deg, #FFB9B9, #FFD3B6, #FFFDBB, #B4ECB4, #ACE1FF, #F6C3FF)"
178{{{#000 그라데이션 기능입니다
179
180무지개색 총공격이다!}}}}}}
181
182헥스 코드를 여러번 입력하여 색과 색 사이의 경계를 좀 더 뚜렷하게 만들어 다양한 시도를 할 수 있습니다.
183{{{||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #AFEEEE, #AFEEEE, #AFEEEE, #AFEEEE, #4682B4, #4682B4, #4682B4, #4682B4)"
184{{{#FFFFFF '''안녕하세요'''}}}[br][br][br]{{{#FFFFFF '''여러분'''}}}}}} ||}}}
185||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #AFEEEE, #AFEEEE, #AFEEEE, #AFEEEE, #4682B4, #4682B4, #4682B4, #4682B4)"
186{{{#FFFFFF '''안녕하세요'''}}}[br]{{{#FFFFFF '''여러분'''}}}}}} ||
187
188다크모드 대응 시, 이미 입력된 위키스타일의 그라데이션 문법 뒤에 dark-style="(위키스타일 다음에 나오는 두 큰따옴표 사이 내용)"을 입력하면 됩니다. 예시는 다음과 같습니다. 설정을 통하여 다크모드를 적응하면 위의 예시와 다르게 보입니다.
189||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #AFEEEE, #AFEEEE, #AFEEEE, #AFEEEE, #4682B4, #4682B4, #4682B4, #4682B4)" dark-style="padding: 5px 10px; background: linear-gradient(to right, #630BCD, #630BCD, #630BCD, #630BCD, #B2112B, #B2112B, #B2112B, #B2112B)"
190{{{#FFFFFF '''안녕하세요'''}}}[br]{{{#FFFFFF '''여러분'''}}}}}} ||
191
192헥스 코드 바로 오른쪽에 퍼센테이지를 붙여서 각 색이 차지하는 크기 및 비율을 조절하는 방법도 있습니다.
193 * {{{linear-gradient(to right, #AFEEEE 65%, #4682B4 80%)"}}}
194 #AFEEEE로 시작하고, 왼쪽에서 65% 지점 이후부터 #4682B4로 전환되기 시작한 후, 왼쪽에서 80% 지점부터 순수한 #4682B4로 완전히 전환되어 종료되는 그라데이션
195{{{||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #AFEEEE 65%, #4682B4 80%)"
196{{{#FFFFFF '''안녕하세요'''}}}[br][br][br]{{{#FFFFFF '''여러분'''}}}}}} ||}}}
197||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #AFEEEE 65%, #4682B4 80%)"
198{{{#FFFFFF '''안녕하세요'''}}}[br]{{{#FFFFFF '''여러분'''}}}}}} ||
199
200 * {{{linear-gradient(to right, #AFEEEE, #4682B4 60%, #C0D84D)"}}}
201 #AFEEEE로 시작하고, 왼쪽에서 60% 지점부터 순수한 #4682B4로 완전히 전환된 후, #C0D84D로 종료되는 그라데이션
202{{{||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #AFEEEE, #4682B4 60%, #C0D84D)"
203{{{#FFFFFF '''안녕하세요'''}}}[br]{{{#FFFFFF '''여러분'''}}}}}} ||}}}
204||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #AFEEEE, #4682B4 60%, #C0D84D)"
205{{{#FFFFFF '''안녕하세요'''}}}[br]{{{#FFFFFF '''여러분'''}}}}}} ||
206
207오른쪽 색상의 지정 위치가 왼쪽 색상보다 작거나 같을 경우, 그라데이션 효과가 사라지고 왼쪽 색상에 지정한 위치에서 색이 나누어집니다.
208 * {{{linear-gradient(to right, #C9151E 30%, #D1EAFF 0%)}}}
209 * {{{linear-gradient(to right, #C9151E 58%, #D1EAFF 57%)}}}
210 * {{{linear-gradient(to right, #C9151E 70%, #D1EAFF 70%)}}}
211 * {{{linear-gradient(45deg, #C9151E 70%, #D1EAFF 70%)}}}
212||<width=300><nopad> {{{#!wiki style="padding: 5px; background: linear-gradient(to right, #C9151E 30%, #D1EAFF 0%)"
213{{{#C9151E '''30%'''}}}}}}||
214||<nopad> {{{#!wiki style="padding: 5px; background: linear-gradient(to right, #C9151E 58%, #D1EAFF 57%)"
215{{{#C9151E '''58%'''}}}}}}||
216||<nopad> {{{#!wiki style="padding: 5px; background: linear-gradient(to right, #C9151E 70%, #D1EAFF 70%)"
217{{{#C9151E '''70%'''}}}}}}||
218||<nopad> {{{#!wiki style="padding: 5px; background: linear-gradient(45deg, #C9151E 70%, #D1EAFF 70%)"
219{{{#C9151E '''70%'''}}}}}}||
220
221서로 다른 방향의 그라데이션을 한 표안에 원할시 linear-gradient(<to 방향>, #<헥스 코드 1>, #<헥스 코드 2>)를 중첩으로 사용해 만들 수 있습니다.
222{{{||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #355c7d, #6c5b7b, transparent 50%), linear-gradient(to top, #f8b195, #f67280, #f64d5f)"
223{{{#fff '''중첩된'''}}}[br]{{{#fff '''그라데이션'''}}}}}} ||}}}
224||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #355c7d, #6c5b7b, transparent 50%), linear-gradient(to top, #f8b195, #f67280, #f64d5f)"
225{{{#fff '''중첩된'''}}}[br]{{{#fff '''그라데이션'''}}}}}} ||
226퍼센테이지를 적용할 수 도 있습니다.
227{{{||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #355c7d 25%, #6c5b7b 25%, #6c5b7b 50%, transparent 50%), linear-gradient(to top, #f8b195 33%, #f67280 33% 66%, #f64d5f 66%)"
228{{{#fff '''중첩된'''}}}[br]{{{#fff '''그라데이션'''}}}}}} ||}}}
229||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #355c7d 25%, #6c5b7b 25%, #6c5b7b 50%, transparent 50%), linear-gradient(to top, #f8b195 33%, #f67280 33% 66%, #f64d5f 66%)"
230{{{#fff '''중첩된'''}}}[br]{{{#fff '''그라데이션'''}}}}}} ||
231
232반복되는 그라데이션을 원할시 linear-gradient앞에 repeating-을 붙여 구현할 수 있습니다.
233{{{||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: repeating-linear-gradient(45deg, #1f719a 6% 12%, #2abdc3 12% 18%, #fff6ee 18% 24%)"
234{{{#0e284c '''반복 그라데이션'''}}}}}} ||}}}
235||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: repeating-linear-gradient(45deg, #1f719a 6% 12%, #2abdc3 12% 18%, #fff6ee 18% 24%)"
236{{{#0e284c '''반복 그라데이션'''}}}}}} ||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: repeating-linear-gradient(45deg, #1f719a 5%, #1f719a 9%, #2abdc3 9% 13%, #fff6ee 13% 17%)"
237{{{#0e284c '''반복 그라데이션'''}}}}}} ||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: repeating-linear-gradient(45deg, #1f719a 2%, #1f719a 4%, #2abdc3 4%, #2abdc3 6%, #fff6ee 6% 8%)"
238{{{#0e284c '''반복 그라데이션'''}}}}}} ||
239
240{{{rgba(R, G, B, A)}}} 등 투명도를 지정하면 그라데이션끼리 중첩도 가능합니다.
241{{{||<width=300><nopad> {{{#!wiki style="padding: 6px 0; background-color: hsl(34, 53%, 82%); background: linear-gradient(0deg, rgba(255, 255, 255, 0.875), rgba(255, 255, 255, 0.875)), repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px, hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px), repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px, hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px )"
242투명도 그라데이션}}} ||
243}}}
244||<width=300><nopad> {{{#!wiki style="padding: 6px 0; background-color: hsl(34, 53%, 82%); background: linear-gradient(0deg, rgba(255, 255, 255, 0.875), rgba(255, 255, 255, 0.875)), repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px, hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px), repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px, hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px )"
245{{{#666 '''투명도 그라데이션'''}}}}}} ||
246
247==== 테이블/표 그라데이션 ====
248[anchor(tablegra)] 표 문법 안에 넣어서 활용하는 방법도 있습니다.
249{{{||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #00a495, #13ad65)"
r2
NightZ
250{{{#fff,#fff '''엔트리위키'''}}}[br]{{{#fff,#fff '''고유 컬러'''}}}}}} ||}}}
r1
NightZ

(새 문서) 		251||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: linear-gradient(to right, #00a495, #13ad65)"
r2
NightZ
252{{{#fff,#fff '''엔트리위키'''}}}[br]{{{#fff,#fff '''고유 컬러'''}}}}}} ||
r1
NightZ

(새 문서) 		253그라데이션 위키스타일 앞에 <nopad>를 넣으시면 셀에 꽉 차는 그라데이션을 넣으실 수 있습니다.
254
255 * 테이블 전체 배경색을 그라데이션으로 지정하는 방법입니다.
256{{{||<tablealign=(정렬 위치)><tablewidth=(테이블 너비)><tablebgcolor=transparent><tablebordercolor=transparent><nopad>{{{#!wiki style="overflow: hidden; border: 2px solid #<외곽선 핵스코드 색>; background: linear-gradient(<방향>, #<헥스코드 1>, #<헥스코드 2>);"
257{{{#!wiki style="margin: -12px -2px"
258||<-2><tablewidth=100%><tablebgcolor=transparent><tablebordercolor=transparent><tablecolor=#fff,#fff> '''표 안의 내용''' ||
259||<width=50%> 1 || 2 ||
260|| 3 || 4 ||}}}}}}||}}}
261||<tablewidth=300><tablebgcolor=transparent><tablebordercolor=transparent><nopad>{{{#!wiki style="overflow: hidden; border: 2px solid #555; background: linear-gradient(to right, #ffb9b9, #fffdbb);"
262{{{#!wiki style="margin: -12px -2px"
263||<-2><tablewidth=100%><tablebgcolor=transparent><tablebordercolor=transparent><tablecolor=#000,#000> '''표 안의 내용''' ||
264||<width=50%> 1 || 2 ||
265|| 3 || 4 ||}}}}}}||
266위키스타일 문법에서 배경색을 그라데이션으로 넣어주고 테이블에서 <tablebgcolor=transparent> 선언을 하여 문법상으론 테이블 자체는 투명하게 해 위키스타일로 지정한 배경 그라데이션이 보이게 하는 원리입니다. [[https://arca.live/b/namuwikistyle/139164190?target=all&keyword=%EA%B7%B8%EB%9D%BC%EB%8D%B0%EC%9D%B4%EC%85%98&p=1|원본 문법 출처]]
267
268특정 셀에만 그라데이션이 보이게 하고 싶다면 그라데이션이 적용되지 않는 것을 원하는 셀에 배경색을 지정해주시면 됩니다.
269
270예시
271||<tablewidth=300><tablebgcolor=transparent><tablebordercolor=transparent><nopad>{{{#!wiki style="overflow: hidden; border: 2px solid #555; background: linear-gradient(to right, #ffb9b9, #fffdbb);"
272{{{#!wiki style="margin: -12px -2px"
273||<-2><tablewidth=100%><tablebgcolor=transparent><tablebordercolor=transparent><tablecolor=#000,#000> '''표 안의 내용''' ||
274||<width=50%><colbgcolor=#333,#333><colcolor=#fff,#fff> 1 || 2 ||
275|| 3 || 4 ||}}}}}}||
276{{{||<tablealign=(정렬 위치)><tablewidth=(테이블 너비)><tablebgcolor=transparent><tablebordercolor=transparent><nopad>{{{#!wiki style="overflow: hidden; border: 2px solid #<외곽선 핵스코드 색>; background: linear-gradient(<방향>, #<헥스코드 1>, #<헥스코드 2>);"
277{{{#!wiki style="margin: -12px -2px"
278||<-2><tablewidth=100%><tablebgcolor=transparent><tablebordercolor=transparent><tablecolor=#fff,#fff> '''표 안의 내용''' ||
279||<width=50%><bgcolor=#<그라데이션 없는 셀 헥스코드><color=#<글자색 헥스코드> 1 || 2 ||
280|| 3 || 4 ||}}}}}}||}}}
281==== 기타모양 그라데이션 ====
282원 모양의 그라데이션을 원할시 다음과 같이 입력해 출력할 수 있습니다.
283{{{{{{#!wiki style="background: radial-gradient(circle at (위치)% (높이)%, #<헥스 코드 1>, #<헥스 코드 2>)"}}}
284}}}
285 * 위치: 0%일시 원의 중심이 최좌측, 100%일시 원의 중심이 최우측
286 * 높이: 0%일시 원의 중심이 최상단, 100%일시 원의 중심이 최하단
287예시
288||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: radial-gradient(circle at 50% 50%, #000 50%, #808080 50%)"
289[br]'''{{{#fff 위치 50%[br]높이 50%[br]크기 50%}}}'''[br][br]}}} ||||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: radial-gradient(circle at 0% 50%, #000 50%, #808080 50%)"
290[br]'''{{{#fff 위치 0%[br]높이 50%[br]크기 50%}}}'''[br][br]}}} ||||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: radial-gradient(circle at 50% 0%, #000 50%, #808080 50%)"
291[br]'''{{{#fff 위치 50%[br]높이 0%[br]크기 50%}}}'''[br][br]}}} ||
292마찬가지로 위의 linear-gradient와 혼용하여 사용가능합니다.
293{{{||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: radial-gradient(circle at 50% 0%, #000 30%, transparent 30%), linear-gradient(to top, #000, #808080)"
294[br]'''{{{#fff 위치 50%[br]높이 0%[br]크기 30%}}}'''[br][br]}}} ||
295}}}
296||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: radial-gradient(circle at 50% 0%, #000 30%, transparent 30%), linear-gradient(to top, #000, #808080)"
297[br]'''{{{#fff 위치 50%[br]높이 0%[br]크기 30%}}}'''[br][br]}}} ||
298
299코닉(극좌표) 그라데이션을 사용하면 파이 모양 그래프를 만들 수 있습니다.
300 * {{{conic-gradient(gray 70%, transparent 0)}}}
301 * {{{conic-gradient(gray 30%, transparent 0)}}}
302
303{{{#!wiki style="display: inline-block"
304{{{#!wiki style="display: table-cell; width: 100px; height: 100px; border-radius: 50%; text-align: center; vertical-align: middle; background: conic-gradient(gray 70%, transparent 0)"
305{{{+1 70%}}}}}}}}} {{{#!wiki style="display: inline-block"
306{{{#!wiki style="display: table-cell; width: 100px; height: 100px; border-radius: 50%; text-align: center; vertical-align: middle; background: conic-gradient(gray 30%, transparent 0)"
307{{{+1 30%}}}}}}}}}
308
309==== 텍스트 그라데이션 효과 ====
310텍스트 자체에 그라데이션을 넣을 수도 있습니다. 그라데이션에는 위의 여러 그라데이션들을 사용할 수 있습니다.
311{{{{{{#!wiki style="display: inline; color: transparent; background: text linear-gradient(to right, #e96443, #904e95); "
312'''텍스트 그라데이션입니다'''}}}}}} {{{#!wiki style="display: inline; color: transparent; background: text linear-gradient(to right, #e96443, #904e95); "
313'''텍스트 그라데이션입니다'''}}}
314
315해설:
316 * {{{display: inline; }}}: 글자(줄)처럼 취급
317 * {{{color: transparent; }}}: 텍스트를 투명하게 함
318 * {{{background: text; }}}: 배경을 텍스트 바로 뒤편으로 한정함
319 * {{{background: linear-gradient(to right, #e96443, #904e95); }}}: 배경을 그러데이션으로 함
320 * 따라서 정확하게는 텍스트에 그러데이션을 입히는 것이 아니라, 투명한 텍스트 바로 뒤편의 배경만을 그러데이션으로 하는 것입니다.
321{{{||<tablealign=center><nopad> {{{#!wiki style="padding: 3px; background: linear-gradient(to right, #fff 50%, #000 0%);"
322{{{#!wiki style="background: text linear-gradient(to right, #000 50%, #fff 0%); color: transparent; font-weight: bold;"
323셀 배경과 텍스트 그라데이션 입니다}}}}}} ||}}}
324||<tablealign=center><nopad> {{{#!wiki style="padding: 3px; background: linear-gradient(to right, #fff 50%, #000 0%);"
325{{{#!wiki style="background: text linear-gradient(to right, #000 50%, #fff 0%); color: transparent; font-weight: bold;"
326셀 배경과 텍스트 그라데이션 입니다}}}}}} ||
327같은 테이블에서 셀 배경과 글씨 모두에 그라데이션을 넣고싶은 경우, 위키 스타일을 각각 써주시면 됩니다. (배경 위키스타일 {{{}}} 안에 글씨 위키스타일 삽입)
328
329{{{|| {{{#!wiki style="background: text linear-gradient(to right, #e96443 , #904e95); color: transparent; font-weight: bold;"
330[[그라데이션|{{{#transparent,#transparent 그라데이션 링크}}}]] 넣는 법}}} ||}}}
331|| {{{#!wiki style="background: text linear-gradient(to right, #e96443 , #904e95); color: transparent; font-weight: bold;"
332[[그라데이션|{{{#transparent,#transparent 그라데이션 링크}}}]] 넣는 법}}} ||
333중간 하이퍼링크에 같은 그라데이션을 넣고싶을 시 하이퍼링크 부분에 \{{{#transparent,#transparent 링크}}} 또는 \{{{#!wiki style="display: inline; color: transparent;"
334링크}}} 이렇게 투명하게 써주시면 됩니다.
335단, 이 방법은 하이퍼링크 텍스트가 테이블 안에 있어야 합니다.
336
337=== 글꼴 적용 ===
338{{{#!wiki style="width: fit-content"
339{{{#!wiki style="margin: 10px 0; padding: 7px 12px; border: 1px solid; border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace"
340\{\{\{#!wiki style="font-family: serif"
341NamuWiki
r2
NightZ
342엔트리위키
r1
NightZ

(새 문서) 		343\}\}\}
344}}}{{{#!wiki style="margin: 10px 0; padding: 7px 12px; border: 1px solid; border-radius: 5px; font-size: 1.5em; font-family: serif"
345NamuWiki
r2
NightZ
346엔트리위키
r1
NightZ

(새 문서) 		347}}}
348}}}
349 * {{{font-family: 글꼴}}}
350 * 일반 집단: [[세리프|{{{serif}}}]], [[산세리프|{{{sans-serif}}}]], [[고정폭 글꼴|{{{monospace}}}]], {{{cursive}}}, {{{fantasy}}}
351위 속성을 사용해 텍스트에 글꼴을 적용시킬 수 있습니다.
352'''{{{#red 주의}}}''': 열람하는 브라우저에서 사용 가능한 글꼴만이 적용됩니다. 따라서 기기에 따라 그 글꼴이 적용되지 않은 채로 나타날 수 있습니다.
353
354속성값을 둘 이상 하여도 가능합니다. 앞에 있는 것이 우선되며, 사용 불가할 시 뒤엣것이 적용됩니다.
355{{{#!wiki style="width: fit-content"
356{{{#!wiki style="margin: 10px 0; padding: 7px 12px; border: 1px solid; border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace"
357\{\{\{#!wiki style="font-family: [[Times New Roman]], [[굴림]], serif"
358NamuWiki
r2
NightZ
359엔트리위키
r1
NightZ

(새 문서) 		360\}\}\}
361}}}{{{#!wiki style="margin: 10px 0; padding: 7px 12px; border: 1px solid; border-radius: 5px; font-size: 1.5em; font-family: Times New Roman, 굴림, serif"
362NamuWiki
r2
NightZ
363엔트리위키
r1
NightZ

(새 문서) 		364}}}
365}}}위키 스타일 문법의 특성상 개행이 필수적이기에 개행할 수 없는 문법(문단 문법 등.) 내에 글꼴을 적용할 때에는 불가피하게 HTML 문법을 사용하여야만 합니다.[* {{{{{{#!html <span style="font-family: 글꼴">텍스트</span>}}}}}}. 당연히 문법 내에 서식을 적용하시려면 HTML 태그를 사용하여야 합니다.]
366
367=== 틀 관련 속성들 ===
368 * 아래의 [[#틀|틀]] 문단을 참고하시기 바랍니다.
369여기서 '''(수치)'''는 [[정수|정수값]]을 의미하며, 음수값도 적용이 됩니다. calc( 수치 단위 )로 할 경우 해당 식을 계산하여 처리도 가능하나, 덧셈과 뺄셈은 기호 근처에 띄어쓰기가 추가로 필요합니다.
370 * 테두리: {{{border-(방향):(선 굵기)px (선 스타일) (색상)}}}
371 예1: 상우하좌 각각 5, 10, 15, 20px 굵기의 테두리
372 {{{border:1px solid; border-width:5px 10px 15px 20px}}}
373 예2: 전방향 1px이지만 윗부분은 5px
374 {{{border:1px solid; border-top:5px solid}}}
375 * 방향: {{{top}}}=위, {{{bottom}}}=아래, {{{right}}}=오른쪽, {{{left}}}=왼쪽, 공백=전방향.
376 * 선 굵기: {{{thin, medium, thick}}} = 각각 1, 3, 5px, 또는 직접 입력 XXpx[* 반드시 단위를 붙일 것.]
377 * 선 스타일
378 ||{{{#!wiki style="padding: 2px; margin: 2px; float: left; width: 100; border: 10px none gray"
379{{{none}}}}}}{{{#!wiki style="padding: 2px; margin: 2px; float: left; width: 100; border: 10px solid gray"
380{{{solid}}}}}}{{{#!wiki style="padding: 2px; margin: 2px; float: left; width: 100; border: 10px double gray"
381{{{double}}}}}}{{{#!wiki style="padding: 2px; margin: 2px; float: left; width: 100; border: 10px dotted gray"
382{{{dotted}}}}}}{{{#!wiki style="padding: 2px; margin: 2px; float: left; width: 100; border: 10px dashed gray"
383{{{dashed}}}}}}{{{#!wiki style="padding: 2px; margin: 2px; float: left; width: 100; border: 10px inset gray"
384{{{inset}}}}}}{{{#!wiki style="padding: 2px; margin: 2px; float: left; width: 100; border: 10px outset gray"
385{{{outset}}}}}}{{{#!wiki style="padding: 2px; margin: 2px; float: left; width: 100; border: 10px groove gray"
386{{{groove}}}}}}{{{#!wiki style="padding: 2px; margin: 2px; float: left; width: 100; border: 10px ridge gray"
387{{{ridge}}}}}}||
388 * 선 색상: 지정 하지 않을 경우의 색상은 글씨 색깔을 따라 갑니다. border-(방향)-color로 border의 서술과 분리할 수 있으며, dark-style에 사용 할 수도 있습니다.
389 * 배경 색: {{{background-color:(색상)}}}
390 * 그림자 효과 : {{{text-shadow: }}}
391 * 둥근 모서리: {{{border-radius:(수치)px}}}
392 {{{#!wiki style=""
393예시
394{{{#!wiki style="display: inline-block; width: 45%; padding: 5px 10px; margin: 3px; border: 2px solid gray; border-radius: 10px"
395{{{border-radius:10px}}}:[br]모든 방향 10px}}}{{{#!wiki style="display: inline-block; width: 45%; padding: 5px 10px; margin: 3px; border: 2px solid gray; border-radius: 10px 20px"
396{{{border-radius:10px 20px}}}:[br]좌상, 우하는 10px, 우상, 좌하는 20px}}}{{{#!wiki style="display: inline-block; width: 45%; padding: 5px 10px; margin: 3px; border: 2px solid gray; border-radius: 5px 10px 20px"
397{{{border-radius:5px 10px 20px}}}:[br]좌상부터 시계방향으로 5px 10px 20px (좌하는 기본 5px)}}}{{{#!wiki style="display: inline-block; width: 45%; padding: 5px 10px; margin: 3px; border: 2px solid gray; border-radius: 5px 10px 20px 40px"
398{{{border-radius:5px 10px 20px 40px}}} :[br]좌상부터 시계방향으로 5px 10px 20px 40px}}}
399}}}
400 * 틀 안의 여백: {{{padding-(방향):(수치)px}}}
401 기본값은 {{{padding:0px}}}
402
403 * 틀 밖의 여백: {{{margin-(방향):(수치)px}}} 또는 {{{margin:(세로 적용 수치)px (가로 공통 적용 수치)px}}} 또는 {{{margin:(북쪽 수치)px (동쪽 수치)px (남쪽 수치)px (서쪽 수치)px}}}}
404 기본값은 {{{margin:0px}}}
405 {{{margin:0px auto}}}로 주었을 경우 표 밖의 가로 여백을 자동으로 맞춥니다. 즉, 표의 화면 가운데 정렬이 됩니다.
406 이 방법을 사용하면 표의 셀 내부에 이미지를 삽입할 때 여백을 없애는 것이 가능하며 양수값을 사용하면 여백이 추가되며, 음수 값을 사용할 경우 여백이 줄어듭니다. 단순히 여백 없이 사진이 셀을 최대로 채우게 하고 싶은 경우는 <[[nopad]]>로 대체 가능합니다.
r2
NightZ
407 ||<colbgcolor=#fc6><colcolor=#000> 문법 ||<^|1>문법 미사용[br]{{{||<tan> [[파일:엔트리위키:로고1.png]] ||
408}}}||<^|1>문법 사용[br]{{{||<tan><nopad> [[파일:엔트리위키:로고1.png]] ||}}}||
r1
NightZ

(새 문서) 		409 || 출력 ||{{{#!wiki style=""
r2
NightZ
410||<tan> [[파일:엔트리위키:로고1.png|width=200]] ||}}}||{{{#!wiki style="float: left"
r1
NightZ

(새 문서) 		411||<tan> {{{#!wiki style="margin: -5px -10px -5px -10px"
r2
NightZ
412[[파일:엔트리위키:로고1.png|width=200]]}}} ||}}}||
r1
NightZ

(새 문서) 		413 만약 margin이 접기나 표 밖으로 나오면 잘리며 스크롤 바가 생깁니다.[* 원래는 그냥 튀어 나왔으나, 2019년 10월 말 경부터 변경.]
414
415 * 틀 높이: {{{height:(수치)px}}}
416
417 * 틀 길이: {{{width:(수치)px 또는 (수치)%}}}: %의 기준은 화면의 너비.
418
419 * 틀 최대 길이: {{{max-width:(수치)px 또는 (수치)%}}}: %의 기준은 화면의 너비.
420
421 * 폰트 색: {{{color:(색상)}}}
422
423 * 폰트 효과: {{{font-style: normal 또는 italic 또는 oblique}}}
424
425 * 글자 크기: {{{font-size: (수치)pt나 (수치)em 등.}}}[* 글자 크기를 세밀하게 조정. {\{{+? }}\}나 {\{{-? }}\}과는 별개의 수치로 지정되며 소숫점도 가능합니다. 심지어 0까지도 조정 가능해 글자를 숨겨버릴 수도 있습니다. [[https://developer.mozilla.org/en-US/docs/Web/CSS/length|<length>]] 단위도 사용할 수 있습니다.]
426
427 * 글자 위치: {{{text-align: left 또는 center 또는 right}}}
428
429 * 줄 높이: {{{font:1em/}}}'''{{{#f33 {{{line-height}}}}}}''' {{{math; font-family:revert}}}
430 line-height 옵션은 막혀 있으나 위와 같이 우회하여 적용할 수 있습니다. 붉은 강조 표시된 부분을 원하는 값으로 수정하여 적용하며, 기본값은 폰트 크기의 1.5배인 1.5em입니다.
431
432 * 표의 좌, 우 정렬: {{{float:left 또는 right 또는 center}}}
r2
NightZ
433 엔트리위키 이미지, 표의 정렬과 비슷하나 center의 경우 별도의 설정 없이는 표의 폭이 100%로 고정됩니다.
434 float 기능을 사용하여 [[#s-17.3.3|표의 캡션]] 기능과 비슷하게 이미지에도 캡션을 넣을 수 있습니다. 엔트리위키에는 이미지 캡션 기능이 없으므로 이렇게 써야 합니다.
r1
NightZ

(새 문서) 		435 ||<colbgcolor=#fc6><colcolor=#000>예시[br]문법||{{{{{{#!wiki style="float: left; text-align: center"
r2
NightZ
436[[파일:엔트리위키:로고1.png|width=200]][br]엔트리위키 로고}}}}}}||{{{{{{#!wiki style="float: left; text-align: center"
437엔트리위키 로고[br][[파일:엔트리위키:로고1.png|width=200]]}}}}}}||
r1
NightZ

(새 문서) 		438 ||예시[br]출력||{{{#!wiki style="float: left; text-align: center"
r2
NightZ
439[[파일:엔트리위키:로고1.png|width=200]][br]엔트리위키 로고}}}||{{{#!wiki style="float: left; text-align: center"
440엔트리위키 로고[br][[파일:엔트리위키:로고1.png|width=200]]}}}||
r1
NightZ

(새 문서) 		441 * {{{display}}} 속성: 표가 화면에서 어떻게 표시될지를 정합니다. 속성을 주지 않을 경우 기본값은 {{{block}}}입니다. 줄글 같이 취급하는 {{{inline}}}, 표로 취급하는 {{{table}}}, 안 보이게 하는 {{{none}}} 등이 있습니다.
442 기본값인 block의 경우 강제로 표 너비의 최소를 화면의 100%로 맞춥니다. table 등으로 값을 줄 경우 이를 막을 수 있습니다.
443 ||<table width=100%><width=50%>display 속성을 주지 않을 경우
444(기본인 {{{display:block}}}이 됨)
445{{{#!wiki style="border: 1px solid gray; border-top: 5px solid orange"
r2
NightZ
446[[파일:엔트리위키:로고1.png|width=200]]}}}||<width=50%>display 속성을 {{{display:table}}}로 준 경우
r1
NightZ

(새 문서) 		447{{{#!wiki style="border: 1px solid gray; border-top: 5px solid orange; display: table"
r2
NightZ
448[[파일:엔트리위키:로고1.png|width=200]]}}}||
r1
NightZ

(새 문서) 		449[clearfix]
r2
NightZ
450[include(틀:문서 가져옴, this=문단, title=엔트리위키:문법 도움말/심화, version=2387, uuid=80dac44c-c55f-42fa-8ac1-34918c8a5861, paragraph=14, )]
r1
NightZ

(새 문서) 		451
452== \{{{#!style }}} 구문을 활용한 클래스 기반 전역 스타일 지정 ==
453{{{{{{#!wiki style=""}}}}}} 구문은 인라인(inline)으로 구문 내에 CSS 스타일을 부여하는 것과는 달리, {{{{{{#!style }}}}}} 구문을 사용하면 전역으로 CSS 스타일을 부여할 수 있습니다.
454
455{{{{{{#!style
456선택자 { (스타일 속성): (스타일 값); ... }
457...
458}}}}}}
459
460[[HTML]]에서의 [[https://developer.mozilla.org/ko/docs/Web/HTML/Reference/Elements/style|<style> 태그]]의 사용례와 같습니다.
461
r2
NightZ
462엔트리위키 전용 쿼리로 {{{@theseed-dark-mode}}}를 지원합니다. 이 쿼리로 감싼 선택자는 다크모드에서만 적용됩니다.
r1
NightZ

(새 문서) 		463
464||<tablebgcolor=transparent>{{{#!wiki style="font-family: Consolas, monospace; border-radius: 5px; margin: auto; padding: 5px 10px;"
465\{{{#!style
466{{{#tomato '''.red'''}}} {
467 background-color: {{{#tomato red}}};
468 color: white;
469}
470@theseed-dark-mode {
471 {{{#tomato '''.red'''}}} {
472 background-color: {{{#tomato green}}};
473 }
474}
475\}}}
476}}} ||
477||<rowbgcolor=#fc6,DarkGoldenRod> '''예시''' ||
478위와 같이 red 클래스를 쿼리 밖과 안에서 동시에 선언하게 된다면, 라이트 모드일 때는 쿼리 밖의 '''배경색은 빨간색, 글자 색상은 흰색''' 스타일이 적용되며, 다크 모드일 때는 쿼리 안의 '''배경색은 초록색, 글자 색상은 흰색[* 쿼리 내에서 변동이 없다면 쿼리 밖에서 선언된 스타일을 받아옵니다.]'''의 스타일이 적용됩니다.
479
480이 전역 속성을 실제로 적용하는 예시는 본 문단의 하위 항목을 참고해주시길 바랍니다.
481
482{{{#red '''주의'''}}}: {{{{{{#!style }}}}}} 구문 내에서 선택자 중첩은 지원하지 않습니다.
483
484{{{#red '''주의'''}}}: {{{{{{#!style }}}}}} 구문 내에서 {{{@media}}} 쿼리 등은 지원하지 않습니다.
485
486{{{#red '''주의'''}}}: {{{[include()]}}} 문법으로 특정 문서의 {{{{{{#!style }}}}}}을 가져올 수 없습니다.
487
488{{{#red '''주의'''}}}: {{{{{{#!wiki }}}}}} 구문과 같이 {{{{{{#!style }}}}}} 구문 또한 모든 CSS 속성들이 사용 가능한 것이 아닙니다.
489
490=== \{{{#!wiki class="" }}} 구문과 함께 사용하기 ===
491{{{#!style
492/* 아래 예제를 위한 style 임의 설정 */
493.red {
494 background-color: red;
495 color: white;
496}
497}}}
498||<tablebgcolor=transparent>{{{#!wiki style="font-family: Consolas, monospace; border-radius: 5px; margin: auto; padding: 5px 10px;"
499\{{{#!style
500{{{#tomato '''.red'''}}} {
501 background-color: red;
502 color: white;
503}
504\}}}
505}}} ||
506||<rowbgcolor=#fc6,DarkGoldenRod> '''전역 스타일 지정''' ||
507위와 같이 {{{{{{#!style }}}}}} 구문으로 전역 스타일을 지정했습니다.
508내용은 '''red''' 클래스에 속한 모든 요소에 배경색을 '''빨간색'''으로, 글자 색상을 '''흰 색'''으로 지정한다는 의미입니다.
509
510||<tablewidth=100%><width=50%><tablebgcolor=transparent><rowbgcolor=#fc6,DarkGoldenRod><colkeepall> '''입력''' ||<colkeepall> '''출력''' ||
511||{{{#!wiki style="font-family: Consolas, monospace; border-radius: 5px; margin: auto; padding: 5px 10px;"
512\{{{#!wiki class={{{#tomato '''"red"'''}}}
513빨간색 배경에 흰 색 글자로 표시될 내용\}}}
514}}} || {{{#!wiki class="red"
515빨간색 배경에 흰 색 글자로 표시될 내용}}} ||
516만약 {{{{{{#!wiki }}}}}} 구문의 속성으로 {{{class="red"}}}를 입력한다면, {{{{{{#!wiki }}}}}} 구문 내부의 스타일이 전역으로 지정된 '''red''' 클래스의 스타일로 지정되게 됩니다.
517
518||<tablewidth=100%><width=50%><tablebgcolor=transparent><rowbgcolor=#fc6,DarkGoldenRod><colkeepall> '''입력''' ||<colkeepall> '''출력''' ||
519||{{{#!wiki style="font-family: Consolas, monospace; border-radius: 5px; margin: auto; padding: 5px 10px;"
520\{{{#!wiki class="red" {{{#tomato '''style="color: black;"'''}}}
521빨간색 배경에 {{{#tomato 검은색}}} 글자로 표시될 내용\}}}
522}}} || {{{#!wiki class="red" style="color: black;"
523빨간색 배경에 검은색 글자로 표시될 내용}}} ||
524위의 예제에서 {{{{{{#!wiki }}}}}} 구문의 속성으로 '''글자색을 검은색으로 변경하는 속성'''인 {{{style="color: black;"}}}을 추가하게 된다면, 전역 스타일의 red 클래스 부분의 '''글자색을 흰 색으로 설정하는 속성'''인 '''{{{color: white;}}}''' 부분을 덮어씌웁니다. 나머지 속성인 배경색 속성 '''{{{background-color: red;}}}'''는 동일하게 적용되었습니다.
525
526'''참고''': {{{class="class1 class2"}}}처럼 클래스 이름을 띄어쓰기로 구분하여 여러 클래스에 소속시킬 수 있습니다.
527=== 셀 매개변수 <class>와 함께 사용하기 ===
528셀에 클래스를 지정하면 앞서 정의한 스타일을 셀에도 적용할 수 있습니다. 클래스로 지정한 스타일보다 위키 문법으로 따로 지정한 스타일이 우선합니다.
529
530||<tablewidth=100%><width=50%><tablebgcolor=transparent><rowbgcolor=#fc6,DarkGoldenRod><colkeepall> '''입력''' ||<colkeepall> '''출력''' ||
531||{{{#!wiki style="font-family: Consolas, monospace; border-radius: 5px; margin: auto; padding: 5px 10px;"
532\||<class=red> .red 적용 \|| 미적용 \||}}} || {{{#!wiki
533||<class=red> .red 적용 || 미적용 ||}}} ||
534||{{{#!wiki style="font-family: Consolas, monospace; border-radius: 5px; margin: auto; padding: 5px 10px;"
535\||<class=red> 기본 \||<class=red><bgcolor=#090,#090> 배경색 덮어쓰기 \||}}} || {{{#!wiki
536||<class=red> 기본 ||<class=red><bgcolor=#090,#090> 배경색 덮어쓰기 ||}}} ||
537
538'''{{{#red 주의}}}''': {{{<rowclass=...>}}} 및 {{{<colclass=...>}}}는 지원하지 않습니다.
539=== 테이블 매개변수 <tableclass>와 함께 사용하기 ===
540==== 테이블 테두리 두껍게 만들기 ====
541{{{#!style
542/* 아래 예제를 위한 style 임의 설정 */
543table.thick-bordered {
544 border: 5px solid red;
545}
546}}}
547||<tablebgcolor=transparent>{{{#!wiki style="font-family: Consolas, monospace; border-radius: 5px; margin: auto; padding: 5px 10px;"
548\{{{#!style
549table.{{{#tomato '''thick-bordered'''}}} {
550 border: 5px solid red;
551}
552\}}}
553}}} ||
554||<rowbgcolor=#fc6,DarkGoldenRod> '''전역 스타일 지정''' ||
555위와 같이 {{{{{{#!style }}}}}} 구문으로 전역 스타일을 지정했습니다.
556테이블 중 '''thick-bordered''' 클래스를 가진 테이블만 '''5px'''의 '''실선 빨간색''' 테두리를 갖도록 합니다.
557
558||<tablewidth=100%><width=50%><tablebgcolor=transparent><rowbgcolor=#fc6,DarkGoldenRod><colkeepall> '''입력''' ||<colkeepall> '''출력''' ||
559||{{{#!wiki style="font-family: Consolas, monospace; border-radius: 5px; margin: auto; padding: 5px 10px;"
560\||<tableclass={{{#tomato '''thick-bordered'''}}}><tablewidth=100%> 두꺼운 테두리를 가진 테이블 ||
561}}} || {{{#!wiki
562||<tableclass=thick-bordered><tablewidth=100%> 두꺼운 테두리를 가진 테이블 ||}}} ||
563만약 테이블의 매개변수로 '''<tableclass=thick-bordered>'''를 지정한다면, 이 테이블에 thick-bordered 클래스의 스타일을 적용한다는 의미입니다. 따라서 두꺼운 테두리를 갖게 되었습니다.
564
565==== 특정 배수의 행 간격으로 일정한 스타일 적용하기 ====
566{{{#!style
567/* 아래 예제를 위한 style 임의 설정 */
568table.repeated-row > tbody > tr > td:first-of-type {
569 font-weight: bold;
570}
571table.repeated-row > tbody > tr:nth-of-type(2n) > td:first-of-type {
572 color: red;
573}
574table.repeated-row > tbody > tr:nth-of-type(2n + 1) > td:first-of-type {
575 color: lime;
576}
577}}}
578||<tablebgcolor=transparent>{{{#!wiki style="font-family: Consolas, monospace; border-radius: 5px; margin: auto; padding: 5px 10px;"
579\{{{#!style
580table{{{#tomato '''.repeated-row'''}}} > tbody > tr > td:first-of-type {
581 font-weight: bold;
582}
583table{{{#tomato '''.repeated-row'''}}} > tbody > tr:nth-of-type({{{#tomato 2n}}}) > td:first-of-type {
584 color: red;
585}
586table{{{#tomato '''.repeated-row'''}}} > tbody > tr:nth-of-type({{{#tomato 2n + 1}}}) > td:first-of-type {
587 color: blue;
588}
589\}}}
590}}} ||
591||<rowbgcolor=#fc6,DarkGoldenRod> '''전역 스타일 지정''' ||
592위와 같이 {{{{{{#!style }}}}}} 구문으로 전역 스타일을 지정했습니다.
593테이블 중 '''repeated-row''' 클래스를 가진 테이블만 해당되며, 적용된 스타일은 아래와 같습니다.
594 * 행 내부의 첫 번째 셀에는 '''볼드체'''가 적용되도록 했습니다.
595 * '''2의 배수의 테이블 행 간격'''으로 행 내부의 첫 번째 셀의 글자색을 다음과 같이 지정했습니다.
596 * 행 순번이 2번째, 4번째, 6번째...라면 '''빨간색'''
597 * 행 순번이 1번째, 3번째, 5번째...라면 '''라임색'''
598
599||<tablewidth=100%><width=50%><tablebgcolor=transparent><rowbgcolor=#fc6,DarkGoldenRod><colkeepall> '''입력''' ||<colkeepall> '''출력''' ||
600||{{{#!wiki style="font-family: Consolas, monospace; border-radius: 5px; margin: auto; padding: 5px 10px;"
601\||<tableclass={{{#tomato '''repeated-row'''}}}><tablewidth=100%><width=50%> 1번째 || A ||
602\|| 2번째 || B ||
603\|| 3번째 || C ||
604\|| 4번째 || D ||
605\|| 5번째 || E ||}}} || {{{#!wiki
606||<tableclass=repeated-row><tablewidth=100%><width=50%> 1번째 || A ||
607|| 2번째 || B ||
608|| 3번째 || C ||
609|| 4번째 || D ||
610|| 5번째 || E ||}}} ||
611만약 테이블의 매개변수로 '''<tableclass=repeated-row>'''를 지정한다면, 이 테이블에 repeated-row 클래스의 스타일을 적용한다는 의미입니다. 따라서 위에서도 나와있듯이 2의 배수대로 스타일이 변경되었습니다.
612
613=== 클래스 기반으로 스타일 재사용하기 ===
614{{{#!style
615.red {
616 background-color: red;
617 color: white;
618}
619}}}
620||<tablebgcolor=transparent>{{{#!wiki style="font-family: Consolas, monospace; border-radius: 5px; margin: auto; padding: 5px 10px;"
621\{{{#!style
622{{{#tomato '''.red'''}}} {
623 background-color: red;
624 color: white;
625}
626\}}}
627}}} ||
628||<rowbgcolor=#fc6,DarkGoldenRod> '''전역 스타일 지정''' ||
629[[#s-3.1|\{{{#!wiki class="" }}} 구문과 함께 사용하기]]의 예제를 가져와보았습니다.
630위의 스타일은 전역 스타일로, 한번 선언한다면 문서 어디에서나 클래스를 붙이면 스타일이 적용됩니다.
631
632||<tablewidth=100%><width=50%><tablebgcolor=transparent><rowbgcolor=#fc6,DarkGoldenRod><colkeepall> '''입력''' ||<colkeepall> '''출력''' ||
633||{{{#!wiki style="font-family: Consolas, monospace; border-radius: 5px; margin: auto; padding: 5px 10px;"
634\{{{#!wiki class={{{#tomato '''"red"'''}}}
635내용1\}}}
636\{{{#!wiki class={{{#tomato '''"red"'''}}}
637내용2\}}}
638\{{{#!wiki class={{{#tomato '''"red"'''}}}
639내용3\}}}
640\{{{#!wiki class={{{#tomato '''"red"'''}}}
641내용4\}}}
642\{{{#!wiki class={{{#tomato '''"red"'''}}}
643내용5\}}}
644}}} || {{{#!wiki class="red"
645내용1}}}
646{{{#!wiki class="red"
647내용2}}}
648{{{#!wiki class="red"
649내용3}}}
650{{{#!wiki class="red"
651내용4}}}
652{{{#!wiki class="red"
653내용5}}} ||
654모두 {{{{{{#!wiki }}}}}} 구문의 속성으로 {{{class="red"}}}를 사용해 클래스 '''red'''의 스타일이 적용되어, 모두 빨간색 배경에 흰 색 글자색이 적용되었습니다.
655== 하이퍼링크 ==
r2
NightZ
656 * '''관련 기초 문법''': [[엔트리위키:문법 도움말#하이퍼링크|하이퍼링크 기초 문법]]
r1
NightZ

(새 문서) 		657
658=== [anchor(앵커)]앵커(anchor) ===
659[anchor(앵커 리다이렉트)]{{{[anchor()]}}}문법을 사용하면 현재 문서 또는 다른 문서의 임의의 위치로 하이퍼링크를 걸 수 있습니다.
660
661우선, 먼저 해야 할 일은 링크를 걸어 이동시키고자 하는 현재 문서 또는 다른 문서의 특정 위치(도착점)에 앵커를 삽입하는 것입니다. 링크를 보내고자 하는 곳에 아래와 같이 앵커를 넣어줍니다.
662[anchor(아무개)] 예시) {{{[anchor(아무개)]}}}
663
664그 다음 링크를 걸 곳(출발점)에는 아래와 같은 방법으로 링크를 만들어주시면 됩니다. 문단 링크 문법과는 #뒤에 's-문단명' 대신 앵커 이름이 온다는 점만 다릅니다.
665||<rowbgcolor=#fc6><rowcolor=#000> 사용법 || 출력 || 설명 ||
r2
NightZ
666||{{{[[엔트리위키:문법 도움말/심화#아무개]]}}}||[[엔트리위키:문법 도움말/심화#아무개]]||<|2>특정 문서의 해당 앵커가 있는 위치로 하이퍼링크를 겁니다.||
667||{{{[[엔트리위키:문법 도움말/심화#아무개|엔트리위키:문법 도움말/심화#아무개]]}}}||[[엔트리위키:문법 도움말/심화#아무개|엔트리위키:문법 도움말/심화#아무개]]||
r1
NightZ

(새 문서) 		668||{{{[[#아무개]]}}}||[[#아무개]]||같은 문서 내의 해당 앵커가 있는 위치로 하이퍼링크를 겁니다.||
r2
NightZ
669||{{{[[엔트리위키:문법 도움말/심화#아무개|물론 링크와 출력이 서로 다르게 할 수도 있습니다.]]}}}||[[엔트리위키:문법 도움말/심화#아무개|물론 링크와 출력이 서로 다르게 할 수도 있습니다.]]||<|2>링크와 출력이 서로 다른 앵커 문법입니다.||
r1
NightZ

(새 문서) 		670||{{{[[#아무개|나아가 같은 문서로도요.]]}}}||[[#아무개|나아가 같은 문서로도요.]]||
671
672한편, 특정한 위치에 자동으로 생성되는 앵커도 있습니다.
r2
NightZ
673 * 모든 목차에는 'toc'이라는 앵커가 있습니다. {{{[[문서명#toc]]}}}을 사용하면 '''해당 문서의 목차'''로 이동하는 링크가 생깁니다. 예시) [[엔트리위키:문법 도움말/심화#toc|엔트리위키:문법 도움말/심화#toc]]
674 * 모든 문단에는 s-문단번호 앵커와 문단이름 앵커가 있습니다. {{{[[문서명#s-n]]}}}을 사용하면 '''해당 문서의 n번째 문단'''으로 이동하는 링크가 생깁니다. 또한 {{{[[문서명#문단 이름]]}}}을 사용하면 '''해당 문서의 해당 문단'''으로 이동하는 링크가 생깁니다. 문단을 추가하거나 삭제하면 문단번호가 변화하니 문단번호 앵커는 쉽게 변할 수 있습니다. 그러나 문단이름은 변하는 경우가 상대적으로 적어 더 안정적입니다. 물론 문단이름도 변할 수 있어서 완전한 것은 아닙니다. 문단 이름과 문단 문법(=) 사이에 띄어쓰기가 2개 이상 있을 경우 그 띄어쓰기까지 문단이름으로 포함시켜야 합니다.[* 읽기 모드에서 텍스트 중 2개 이상의 띄어쓰기는 출력되지 않으니 해당 문서의 해당 문단명에서 띄어쓰기를 수정하는 방법을 권장합니다.] 예시) [[엔트리위키:문법 도움말/심화#s-1|엔트리위키:문법 도움말/심화#s-1]], [[엔트리위키:문법 도움말/심화#개요|엔트리위키:문법 도움말/심화#개요]]
675 * 모든 각주에는 fn-각주번호 또는 fn-각주이름 앵커가 있습니다. {{{[[문서명#fn-n]]}}}을 사용하면 '''해당 문서의 n번째 각주'''로 이동하는 링크가 생기고, {{{[[문서명#fn-A]]}}}을 사용하면 해당 문서의 A라는 각주로 이동하는 링크가 생깁니다. 예시) [[엔트리위키:문법 도움말/심화#fn-1|엔트리위키:문법 도움말/심화#fn-1]], [[엔트리위키:문법 도움말/심화#fn-A|엔트리위키:문법 도움말/심화#fn-A]]
676 * 모든 각주가 삽입된 본문에는 rfn-각주번호 앵커가 있습니다. {{{[[문서명#rfn-n]]}}}을 사용하면 '''해당 문서의 n번째 각주가 삽입된 곳'''으로 이동하는 링크가 생깁니다. 여기에는 각주번호가 아닌 각주이름은 사용할 수 없습니다. 예시) [[엔트리위키:문법 도움말/심화#rfn-1|엔트리위키:문법 도움말/심화#rfn-1]], [[엔트리위키:문법 도움말/심화#rfn-2|엔트리위키:문법 도움말/심화#rfn-2]]
r1
NightZ

(새 문서) 		677 * 분류 문서의 속한 문서 목록에는 category-'이름공간' 앵커가 있습니다. 하위 분류에는 category-분류 앵커가 있습니다.
678
r2
NightZ
679단, 엔트리위키 [[스킨 설정]]에서 '고정형 내비게이션 바'를 사용하는 경우 해당 기능 특성상 앵커 이동 위치의 내용이 가려지는 현상이 발생합니다.
r1
NightZ

(새 문서) 		680[*A 각주이름 앵커]
681
682같은 이름을 가진 문단이 2개 이상 있을시, 앵커가 적용되지 않으니 #s-문단번호 방식으로 링크하거나, 앵커 이름을 다르게 해야 합니다.
683
684접기 문법 안에 있는 도착점 앵커는 작동하지 않을 수 있으니 접기 문법 밖에 도착점 앵커를 만드시기 바랍니다.
685
686앵커를 문단 제목에 삽입할 경우 제목의 뒤보다는 앞에 삽입하는 것이 추천됩니다. 제목이 길어질 경우 제목의 뒤에 달린 앵커는 해당 문단의 제목을 모두 노출하지 못할 수 있습니다.
687
688=== [anchor(하이퍼링크 시 주의)] 제목에 |, {{{\}}}, #가 쓰이거나 ]로 끝나거나 /로 시작하는 문서로 하이퍼링크 걸기 ===
689기술적인 문제로 일반적인 하이퍼링크 문법으로는 해당 문서로 통하는 정상적인 하이퍼링크를 만들 수 없습니다. 이럴 때는 해당 문자 앞에 [[\\]](백슬래시)를 넣어 줘야 합니다. 단, 한글 윈도우에서는 백슬래시 기호가 원화 기호로 보인다는 점을 기억하세요. #나 맨 끝의 ]가 제목에 들어간 문서에 한해서 맨 끝에 #를 넣어 줘도 됩니다.
690
691다른 편집자를 위해서 [[틀:링크시 주의]]를 달아 줘도 됩니다. 해당 틀을 작성할 때 위키 문법상 \\를 2개 더 입력해야 안내문에 \\가 정상적으로 출력이 되니 유의하십시오.
692
r2
NightZ
693단, /는 예외적으로 \\를 앞에 입력해도 정상 출력이 안 됩니다. 이때는 {{{[[문서:(/으로 시작하는 문서명)]]}}}과 같이 디폴드 이름공간인 "{{{문서:}}}"를 붙이시면 됩니다.[* [[#매크로|매크로 문단]]에 후술된 {{{pagecount(문서)}}} 문법을 생각한다면, {{{엔트리위키:}}} 등 명시된 네임스페이스와 달리, 일반 문서의 네임스페이스인 {{{문서:}}}는 디폴트값이기 때문에 표제어에서 볼 수 없었다는 것을 눈치챌 수 있습니다.] 여러 편법들[* 모양이 비슷한 전각 문자(＃, ／, ＼, ｜, ］)로 리다이렉트 만들거나, 링크를 작성하는 문서의 제목에 /가 없다는 가정 하에 {{{[[../문서명]]}}}을 사용하기 등]을 이용할 수도 있지만 문서 이름공간을 붙이는 것이 정석이면서도 훨씬 더 편리합니다.
r1
NightZ

(새 문서) 		694
695또한 파일 문서를 출력할 때도 마찬가지로 백슬래시 기호를 넣어주면 된다.
696
697||||<rowbgcolor=#fc6><rowcolor=#000><tablealign=center> 예시 ||
698||<rowbgcolor=#fc6><rowcolor=#000> 입력 || 출력 ||
699|| {{{ [[\\]] }}} || [[\\]] ||
700|| {{{[[##]]}}} 또는 {{{[[\#]]}}} || [[##]] ||
701|| {{{[[[12:00]#]] 또는 [[[12:00\]]]}}} || [[[12:00]#]] ||
702|| {{{[[[\X\]]]}}} || [[[\X\]]] ||
703|| {{{[[\#1 to Infinity]]}}} || [[\#1 to Infinity]] ||
704|| {{{[[#1 to Infinity#s-2]]}}}[* 문단 번호 링크 시 끝 문자에 #이 붙은 효과가 나므로 백슬래시가 따로 필요하지 않습니다.] || [[#1 to Infinity#s-2]] ||
705|| {{{[[S\#ARP]]}}} 또는 {{{[[S#ARP#]]}}} || [[S\#ARP]] ||
706|| {{{[[\#fanPD Studio]]}}} || [[\#fanPD Studio]] ||
707|| {{{[[문서:/// (너 먹구름 비)|/// (너 먹구름 비)]]}}} || [[문서:/// (너 먹구름 비)|/// (너 먹구름 비)]] ||
708|| {{{[[파일:\#1f1e33.jpg|width=100]]}}} ||<nopad> [[파일:\#1f1e33.jpg|width=100]][*원_문서명 [[:파일:\#1f1e33.jpg]]] ||
709|| {{{[[파일:#1f1e33.jpg#|width=100]]}}} ||<nopad> [[파일:\#1f1e33.jpg|width=100]][*원_문서명] ||
710
711== 마크업 미적용 텍스트 ==
712일반 텍스트 사이에 코드를 넣거나, 해당 텍스트에 [[마크업 언어|마크업]]이 적용되지 않도록 할 수 있습니다.[* 마크업 언어에 관한 설명은 해당 문서 참조. 프로그래밍과 거리가 먼 사람이라 이해가 가지 않으신다면, 위키 한정으로는 그냥 "위키 문법이 미적용된다"고 이해하셔도 좋습니다.]
713
714|| 입력 || {{{{{{텍스트}}}}}} ||
715|| 결과 || {{{텍스트}}} ||
716
717"\{{{"와 "}}}"안에 들어간 텍스트는 마크업이 적용되지 않고, 이렇게 {{{고정폭 글꼴}}}로 표시됩니다. 텍스트 사이에 코드를 넣는 경우나 이 문법 도움말 문서처럼 특정 마크업을 설명할 때 사용됩니다.
718----
719
720'''{{{#red 주의}}}''': 기술적인 문제로 인해 "\{{{"와 "}}}" 사이에 "{" 또는 "}"를 3개 이상 연속으로 사용할 수 없습니다. {, {{, }, }}는 정상적으로 출력되며, 사이에 띄어쓰기가 있는 경우에도 정상적으로 출력됩니다. 다만 중괄호를 열고 닫는 것이 짝이 맞는 경우엔 작동합니다.
721
722'''{{{#green 참고}}}''': 한 문자에만 마크업을 적용되지 않으면서 일반적으로 출력되게 하려면 그 문자 바로 앞에 \\(역슬래시)를 넣으면 됩니다. [[../#문법 무효화|문법 도움말 기본편 참조]].
723
724== 들여쓰기 ==
725텍스트를 들여쓰고자 할 경우, 줄 앞에 띄어쓰기(공백)을 하나 이상 입력합니다. 들여쓴 텍스트 내에서 또 들여쓰고자 할 경우, 입력했던 공백보다 더 많은 공백을 입력합니다.
726
727'''{{{#red 주의}}}''': 들여쓴 단계에 따라 줄 앞에 입력한 공백의 개수는 일정하게 유지해주십시오.
728
729
730||<bgcolor=#fc6><color=#000><:>입력
731||<bgcolor=#fc6><color=#000><:>출력
732||
733||{{{#!wiki style="font-family: monospace"
734들여쓰지 않은 텍스트
735{{{#red ○}}}들여쓴 텍스트 (단계 1)
736{{{#red ○○}}}들여쓴 텍스트 (단계 2)
737{{{#red ○○○}}}들여쓴 텍스트 (단계 3)
738{{{#red ○○○○}}}들여쓴 텍스트 (단계 4)}}}
739||{{{#!wiki style="margin-bottom: 1rem"
740들여쓰지 않은 텍스트}}}
741 {{{#!wiki style="margin-bottom: 1rem"
742들여쓴 텍스트 (단계 1)}}}
743 {{{#!wiki style="margin-bottom: 1rem"
744들여쓴 텍스트 (단계 2)}}}
745 {{{#!wiki style="margin-bottom: 1rem"
746들여쓴 텍스트 (단계 3)}}}
747 {{{#!wiki style="margin-bottom: 1rem"
748들여쓴 텍스트 (단계 4)}}}
749||
750||<bgcolor=#fc6><color=#000><-2><:>{{{#!wiki style="font-family: monospace; display: inline"
751{{{#red ○}}}}}}은 띄어쓰기를 나타냅니다.
752||
753
754다른 단계의 들여쓰기는 서로 다른 문단으로 여기게 되어 가로로 들여쓰기가 됨과 동시에 문단끼리 세로 여백이 생기게 됩니다.
755
756== 인용문 ==
r2
NightZ
757 * '''관련 기초 문법''': [[엔트리위키:문법 도움말#인용문|인용문 기초]]
r1
NightZ

(새 문서) 		758
759=== 인용문의 정렬 ===
760인용문은 기본적으로 왼쪽 정렬이며 오른쪽이나 가운데 정렬을 하고 싶다면 틀 안에 넣고 그 틀을 정렬하는 방식으로 가능합니다. 표에 넣고 그 표를 정렬하는 식은 버그가 있는데, 아래 버그 부분을 참고하세요.
761
762{{{#!wiki style="float: left; padding-right: 10px; margin-right: 10px; border-right: 1px solid lightgray; width: 45%"
763입력
764----
765{{{> 좌측 정렬 인용문[br](기본값)
766
767{{{#!wiki style="margin: 0px auto; display: table"
768> 중앙 정렬 인용문}}}
769
770{{{#!wiki style="float: right"
771> 우측 정렬 인용문}}}[clearfix]}}}[br] [br] [br] }}}
772출력
773----
774> 좌측 정렬 인용문[br](기본값)
775{{{#!wiki style="margin: 0px auto; display: table"
776> 중앙 정렬 인용문}}}
777{{{#!wiki style="float: right"
778> 우측 정렬 인용문
779}}}[clearfix]
780
781=== 표 안의 인용문 ===
7822020년 12월 기준, 일부 브라우저에서 표 내부에서 인용문 문법을 사용하면 폭 구현이 제대로 안되는 버그가 있습니다. 아래와 같이 인용문 안에 강제로 여백을 넣는 틀을 사용하고 내용을 입력하는 식으로 임시적인 해결이 가능합니다.
783
784## 2020년 5월 기준, 마이크로소프트 엣지, 모질라 파이어폭스, 삼성 인터넷 구현 확인.
785||<rowbgcolor=#fc6><rowcolor=#000> 입력 ||<width=250px> 출력 ||
786||표 안에 그냥 인용문을 넣을 경우
787{{{> 인용문
788}}}||<^|1>아래와 같이 점선 안이 쪼그라 듦.
789>인용문||
790||여백을 주는 틀을 이용하는 경우.
791{{{>{{{#!wiki style="margin: 1em"
792인용문}}}}}}
793 * {{{-1 margin은 padding과 바꾸어도 동일한 결과.}}}
r2
NightZ
794 * {{{-1 값(1em)은 2021년 시점[* 정확히는 인용문 여백이 기존에 쉼표 있다가 사라진 흔적 남은것이 수정된 이후 기준.] 기준 엔트리위키 기본 스킨 엔진의 값.}}}
r1
NightZ

(새 문서) 		795||<^|1><:>
796>{{{#!wiki style="margin: 1em"
797인용문}}}||
798
799== 주석 ==
800위키 문서 내에 출력되지 않는, 편집자만 읽을 수 있는 주석을 달 수 있습니다. 줄 시작시 {{{##}}}를 입력하고 내용을 적습니다. 그 줄에 해당하는 내용은 출력시 없는 줄로 처리됩니다.
801
802※ 문단 편집을 눌러서 확인해 보세요.
803||<table bordercolor=gray><width=300px><rowbgcolor=#fc6><rowcolor=#000> 입력 ||<width=300px> 출력 ||
804||{{{#!wiki style="margin: -20px -10px"
805{{{## 내용
806}}}}}}||
807## 내용
808||{{{#!wiki style="margin: -20px -10px"
809{{{## 주석입니다.
810가나다라
811## 주석은 페이지에 출력되지 않습니다.
812마바사아
813## 토론에서도 주석이 적용됩니다.
814자차카타}}}}}}
815||가나다라
816## 주석은 페이지에 출력되지 않습니다.
817마바사아
818## 토론에서도 주석이 적용됩니다.
819자차카타 ||
820
821----
822편집자의 실수로 인한 잘못된 수정이 잦을 경우 대상의 근처에 넣으면 좋지만, 주석을 넣었음에도 길이가 긴 줄 글의 경우 주석의 주목도가 낮아 못보는 경우가 생길 수 있습니다. 이럴 때는 1. 주목도가 높은 색이 있는 이모지를 넣거나 2. 주석 위아래로 주석을 넣은 빈줄을 넣어, 주목도를 더욱 끌어올릴 수 있습니다.
823
824 * ✔️ Check Mark 같은 몇몇 특문은 환경에 따라 색이 없기도 합니다.([[https://emojipedia.org/check-mark#designs]] 참조바람)
825 아래 예시들은 모든 환경에서 색이 넣어져 있음이 보장됩니다.
826 * 🔶 Large Orange Diamond
827 * 🔷 Large Blue Diamond
828 * 🔻Red Triangle Pointed Up
829 * 🔺Red Triangle Pointed Down
830 * ⭕ Hollow Red Circle
831 * ❌ Cross Mark
832 * ❗ Red Exclamation Mark
833
834||<table bordercolor=gray><width=300px><colbgcolor=#fc6><colcolor=#000><-4> 활용 예시 ||
835|| 입력 ||{{{## 🔶🔶🔶 ㄱ 국적은 오보임
836... A는 ㄴ 국적의 선수다. }}}||{{{## 🔶🔶🔶
837## ㄱ 국적은 오보임
838## 🔶🔶🔶
839... A는 ㄴ 국적의 선수다. }}}||{{{##
840## 🔶🔶🔶 ㄱ 국적은 오보임
841##
842... A는 ㄴ 국적의 선수다. }}}||
843|| 출력 ||<-3>... A는 ㄴ 국적의 선수다. ||
844
845----
846'''{{{#red 편집기 버그:}}}''' 편집기에서 ##의 앞에 한 칸 이상 띄워져 있으면 주석이 적용되지 않고 정상적으로 출력되지만, 편집기 상에서는 {{{#008000,#608b4e 주석이 적용된 것처럼 초록색으로 표시}}}됩니다.
847||<table bordercolor=gray><rowbgcolor=#fc6><rowcolor=#000> 입력 || 편집기 || 출력 ||
848||{{{가나다라
849 ## 주석 앞 띄어쓰기
850마바사아
851}}} ||가나다라
852 {{{#008000,#608b4e ## 주석 앞 띄어쓰기}}}
853마바사아
854||가나다라
855 ## 주석 앞 띄어쓰기
856마바사아
857||
858
859=== 편집 페이지 고정 주석 ===
860{{{##@}}}를 입력하고 원하는 내용을 작성하면 해당 내용을 편집 페이지 최상단에 고정할 수 있습니다.
861
862고정 주석에 쉼표({{{,}}})가 포함되어 있을 경우 제대로 표시되지 않습니다. 쉼표 앞에 [[백슬래시]]를 붙여 {{{\,}}}로 쓰면 해결됩니다.
863
864||<table bordercolor=gray><tablewidth=700px><rowbgcolor=#fc6><rowcolor=#000> 입력 || 출력 ||
865||<width=40%>{{{#!wiki style="margin: -20px -10px"
r2
NightZ
866{{{##@ '''{{{+5 엔트리위키, 여러분이 가꾸어 나가는 지식의 엔트리}}}'''}}}}}}
867||[[파일:엔트리위키 고정 주석.png|width=100%]] ||
r1
NightZ

(새 문서) 		868
869== 매크로 ==
r2
NightZ
870 * '''관련 기초 문법''': [[엔트리위키:문법 도움말#매크로|매크로 기초 문법]] (date/datetime, br, include, table of contents(목차), footnote(각주), age(나이), dday(남은 날))
r1
NightZ

(새 문서) 		871
872=== pagecount ===
r2
NightZ
873{{{[pagecount]}}}로 호출할 수 있습니다. 엔트리위키에 존재하는 문서 개수를 출력합니다. 정수값으로 출력됩니다.
r1
NightZ

(새 문서) 		874
875{{{[pagecount(이름공간)]}}}과 같이 인수를 첨가하면 특정 이름공간의 문서 개수만을 확인할 수 있습니다. 일반 문서는 '문서'로 이름공간을 정하면 됩니다.
876
877||<rowbgcolor=#fc6><rowcolor=#000> 유형 || 입력 || 출력 ||
878|| 전체 ||{{{[pagecount]}}}||[pagecount]||
879|| 문서 이름공간(일반 문서) ||{{{[pagecount(문서)]}}}||[pagecount(문서)]||
880|| 틀 이름공간 ||{{{[pagecount(틀)]}}}||[pagecount(틀)]||
881|| 분류 이름공간 ||{{{[pagecount(분류)]}}}||[pagecount(분류)]||
882|| 파일 이름공간 ||{{{[pagecount(파일)]}}}||[pagecount(파일)]||
883|| 사용자 이름공간 ||{{{[pagecount(사용자)]}}}||[pagecount(사용자)]||
r2
NightZ
884|| 엔트리위키 이름공간 ||{{{[pagecount(엔트리위키)]}}}||[pagecount(엔트리위키)]||
r1
NightZ

(새 문서) 		885|| 휴지통 이름공간 ||{{{[pagecount(휴지통)]}}}||[pagecount(휴지통)]||
886|| 파일휴지통 이름공간 ||{{{[pagecount(파일휴지통)]}}}||[pagecount(파일휴지통)]||
887|| 위키운영 이름공간 ||{{{[pagecount(위키운영)]}}}||[pagecount(위키운영)]||
888|| 템플릿 이름공간 ||{{{[pagecount(템플릿)]}}}||[pagecount(템플릿)]||
889|| 특수기능 이름공간[*미사용 사용되지 않는 이름공간이며, 문서 수는 항상 0입니다.] ||{{{[pagecount(특수기능)]}}}||[pagecount(특수기능)]||
890|| 토론 이름공간[*미사용] ||{{{[pagecount(토론)]}}}||[pagecount(토론)]||
891|| 투표 이름공간[*미사용] ||{{{[pagecount(투표)]}}}||[pagecount(투표)]||
892|| 시스템 이름공간[*미사용] ||{{{[pagecount(시스템)]}}}||[pagecount(시스템)]||
893|| 삭제된사용자 이름공간 ||{{{[pagecount(삭제된사용자)]}}}||[pagecount(삭제된사용자)]||
894|| 특정판 이름공간[*미사용] ||{{{[pagecount(특정판)]}}}||[pagecount(특정판)]||
895
896여기서 정식 이름공간이 아닌 인수를 쓸 경우 모든 문서의 개수가 출력됩니다.
897
898||<rowbgcolor=#fc6><rowcolor=#000> 입력 || 출력 ||
899||{{{[pagecount(더미)]}}}[* [[더미 문서]]는 '더미:'로 시작하지만 [[휴지통 문서]]와 달리 이름공간의 종류가 아닙니다.]||[pagecount(더미)]||
900
901=== [anchor(루비)]루비 문자(ruby) ===
902[[루비 문자]]([[후리가나]])를 입력합니다. 단, 매크로내 컬러 지정은 윗첨자에만 적용됩니다. [[Ruby]] 코딩 용도로 사용할 수 없습니다(...)[* Ruby 코드는 하술한 [[#문법 강조 (syntax highlighting)|문법 강조]]를 이용해야 합니다.]
903
904예시
905|| {{{ [ruby(글자,ruby=루비,color=red)] }}} ||
906|| [ruby(글자,ruby=루비,color=red)] ||
907
908== [anchor(테이블)]테이블 응용 문법 ==
909 * '''관련 기초 문법'''
r2
NightZ
910 * [[엔트리위키:문법 도움말#테이블|테이블 기초 문법]] (기본 형태, 가로 세로 합치기, 테이블과 셀 텍스트의 정렬, 테이블과 셀의 크기와 색상)
911 * [[엔트리위키:문법 도움말#이미지 파일|이미지 삽입법과 관련 매개변수]]
r1
NightZ

(새 문서) 		912
913=== 테이블 캡션 ===
914테이블에 캡션을 달 수 있습니다.
915{{{|캡션| 테이블 || 내용 ||
916}}}
917
918|캡션| 테이블 || 내용 ||
919
920테이블의 첫 셀을 구성하는 {{{|}}} 와 {{{|}}} 사이에 캡션을 입력합니다.
921
922텍스트 뿐만 아니라 이미지나 동영상을 캡션으로 넣을 수도 있습니다.
923
924'''{{{#red 주의}}}''': 이미지와 동영상의 경우, '''border를 포함한''' 테이블의 width 값이 이미지나 동영상의 width 값(youtube 영상은 기본 640) 이상이여야 영상이 잘리지 않습니다.
925
926=== 이미지 / 동영상 삽입 시 기본 셀 여백 제거 ===
r2
NightZ
927이미지 또는 동영상과 같은 콘텐츠를 셀 안에 삽입할 때 생기는 상하 5px, 좌우 10px의 기본 셀 여백을 [[엔트리위키:문법 도움말#nopad|<nopad>]]가 아닌 다음 문법으로도 제거할 수 있습니다.
r1
NightZ

(새 문서) 		928{{{{{{#!wiki style="margin: -5px -10px"
929}}}}}}
930-10px"까지 쓰고 '''반드시 줄을 바꿔줘야''' 합니다.
931가끔씩 상하에 '''-4px의''' 기본 여백을 제거해야 되는 경우도 있습니다.
932----
933아래는 예시입니다.
934
r2
NightZ
935||{{{||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> [[파일:엔트리위키:로고1.png|width=100%]] ||}}}[br][br]문법을 적용하지 않은 이미지.[br]테두리(빨간색) 안에 상하 5px, 좌우 10px의 기본 여백(노란색) 발생.||
936
937||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> [[파일:엔트리위키:로고1.png|width=100%]] ||
r1
NightZ

(새 문서) 		938
939----
940
941||{{{||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> {{{#!wiki style="margin: -5px -10px"
r2
NightZ
942[[파일:엔트리위키:로고1.png|width=100%]]}}} ||}}}[br]문법을 적용한 후.||
r1
NightZ

(새 문서) 		943
944||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> {{{#!wiki style="margin: -5px -10px"
r2
NightZ
945[[파일:엔트리위키:로고1.png|width=100%]]}}} ||
r1
NightZ

(새 문서) 		946
947----
948
949||{{{||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> {{{#!wiki style="margin: -5px -10px"
950[youtube(jNQXAC9IVRw)]}}} ||}}}[br]동영상에 적용.||
951
952||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> {{{#!wiki style="margin: -5px -10px"
953[youtube(jNQXAC9IVRw)]}}} ||
954
955=== 이미지 삽입 시 최대 넓이값 설정하기 ===
956이미지를 셀 안에 삽입할 때 기본 넓이 100%를 설정한 상태에서 최대 넓이를 적용하시려면 다음 문법을 이용해 설정하실 수 있습니다.
957{{{{{{#!wiki style="display: inline-block; max-width: 값px"
958}}}}}} max-width: 값px;"까지 쓰고 '''반드시 줄을 바꿔줘야''' 합니다.[br]그리고 display:inline-block;를 삭제하시면 이미지가 무조건 왼쪽으로 정렬됩니다.
959
960다만 위 문법은 가끔식 원하는 넓이 값이 안 나오는 경우가 있습니다. 해당 경우 아래의 문법을 사용해보시길 바랍니다.
961{{{{{{#!wiki style="display: block; margin: 0 auto; max-width: 값px"
962}}}}}} 다만 위 문법인 경우 이미지를 가운데로 정렬시키며 만약에 이미지를 오른쪽으로 정렬해야 하는 경우에는 margin 값에 '0 0 0 auto'를 주시면 됩니다. 왼쪽으로 정렬해야 하는 경우는 margin 값에 '0 auto 0 0'를 주시면 됩니다.
963----
964아래는 예시입니다.
965
r2
NightZ
966||{{{||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> [[파일:엔트리위키:로고1.png|width=100%]] ||}}}[br][br]문법을 적용하기 전.||
967
968||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> [[파일:엔트리위키:로고1.png|width=100%]] ||
r1
NightZ

(새 문서) 		969
970||{{{||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> {{{#!wiki style="display: inline-block; max-width: 400px"
r2
NightZ
971[[파일:엔트리위키:로고1.png|width=100%]]}}} ||}}}[br]문법을 적용한 후.||
r1
NightZ

(새 문서) 		972
973||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> {{{#!wiki style="display: inline-block; max-width: 400px"
r2
NightZ
974[[파일:엔트리위키:로고1.png|width=100%]]}}} ||
r1
NightZ

(새 문서) 		975
976=== 이미지 삽입 시 스케일링 방식 설정 ===
977{{{#red '''주의'''}}}: [[웹 브라우저]]에 따라서 '''호환성 차이'''가 있을 수 있습니다.
978
979[[CSS]] 표준에서 규정한 '''image-rendering''' 속성을 이용하여 [[웹 브라우저]]가 이미지를 스케일링 할 때에 쓰는 알고리즘을 지정할 수 있습니다.
980{{{{{{#!wiki style="image-rendering: [설정값]"
981}}}}}}
982사용 가능한 설정값은 다음과 같습니다.
983 * '''auto''': 웹 브라우저의 기본 스케일링 방식을 적용합니다.
984 * '''crisp-edges''': 스케일링 과정에서 계단 현상을 제거합니다.
985 * '''smooth''': 스케일링 과정에서 계조를 매끄럽게 합니다. 일반적인 수준의 결과물이 나옵니다.
986 * '''high-quality''': 스케일링 과정에서 계조를 매끄럽게 합니다. smooth 값에 비해서 더욱 정밀한 스케일링 작업이 이루어집니다. '''웹 브라우저의 렌더링 성능에 영향을 줄 수 있으므로 주의해서 사용하세요!'''
987 * '''pixelated''': Nearest Neighbor 알고리즘을 통해 스케일링이 이루어집니다. 화질에 어떠한 영향도 끼치지 않습니다.
988
989별도로 설정하지 않을 경우에는 기본값인 auto로 설정됩니다.
990----
991아래는 예시입니다.
992
993||{{{||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> {{{#!wiki style="margin: -5px -10px; image-rendering: high-quality"
r2
NightZ
994[[파일:엔트리위키:로고1.png|width=100%]]}}} ||}}} image-rendering 값을 high-quality로 설정할 때 ||
r1
NightZ

(새 문서) 		995
996||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> {{{#!wiki style="margin: -5px -10px; image-rendering: high-quality"
r2
NightZ
997[[파일:엔트리위키:로고1.png|width=100%]]}}} ||
r1
NightZ

(새 문서) 		998
999----
1000
1001||{{{||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> {{{#!wiki style="margin: -5px -10px; image-rendering: pixelated"
r2
NightZ
1002[[파일:엔트리위키:로고1.png|width=100%]]}}} ||}}} image-rendering 값을 pixelated로 설정할 때 ||
r1
NightZ

(새 문서) 		1003
1004||<table align=center><table width=500><table bordercolor=red><table bgcolor=yellow> {{{#!wiki style="margin: -5px -10px; image-rendering: pixelated"
r2
NightZ
1005[[파일:엔트리위키:로고1.png|width=100%]]}}} ||
r1
NightZ

(새 문서) 		1006
1007=== 테이블 여러 개 나란히 배치하기 ===
1008{{{<tablealign>}}} 문법을 사용하여 테이블을 두 개 이상 가로로 나란히 배치해야 할 때가 있습니다. 이 경우 {{{wiki}}} 문법을 사용할 수 있습니다.
1009
1010==== 오른쪽 정렬된 테이블 ====
1011예를 들어, 1번 테이블과 2번 테이블을 동시에 배치해야 하는 경우, 표 간 개행을 하면 다음과 같이 2번 테이블이 개행되어 출력됩니다.
1012||<tablewidth=100%><tablebordercolor=#00A495,#2d2f34><tablebgcolor=#fff,#1f2023><colbgcolor=#00A495,#010101><colcolor=#fff,#eee><width=60px> '''{{{#fff,#eee 문법}}}''' ||{{{#!folding [ 문법 펼치기 · 접기 ]
1013{{{||<tablealign=right> '''1번 테이블''' ||
1014|| 내용내용내용내용내용내용내용내용내용 ||
1015|| blahblahblahblahblahblahblahblah ||
1016|| [[로렘 입섬|Lorem ipsum, dolor sit amet.]] ||
1017
1018||<tablealign=right> '''2번 테이블''' ||
1019|| 내용내용내용내용내용내용내용내용내용 ||
1020|| blahblahblahblahblahblahblahblah ||
1021|| [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||}}}}}}||
1022|| '''결과''' ||{{{#!wiki
1023||<tablealign=right> '''1번 테이블''' ||
1024|| 내용내용내용내용내용내용내용내용내용 ||
1025|| blahblahblahblahblahblahblahblah ||
1026|| [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||
1027
1028||<tablealign=right> '''2번 테이블''' ||
1029|| 내용내용내용내용내용내용내용내용내용 ||
1030|| blahblahblahblahblahblahblahblah ||
1031|| [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||}}}||
1032[clearfix]
1033표 간 개행을 하지 않으면 두 테이블이 붙어버리므로 2번 테이블의 {{{<tablealign=right>}}} 문법은 무효화됩니다.
1034||<tablewidth=100%><tablebordercolor=#00A495,#2d2f34><tablebgcolor=#fff,#1f2023><colbgcolor=#00A495,#010101><colcolor=#fff,#eee><width=60px> '''{{{#fff,#eee 문법}}}''' ||{{{#!folding [ 문법 펼치기 · 접기 ]
1035{{{||<tablealign=right> '''1번 테이블''' ||
1036|| 내용내용내용내용내용내용내용내용내용 ||
1037|| blahblahblahblahblahblahblahblah ||
1038|| [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||
1039||<tablealign=right> '''2번 테이블''' ||
1040|| 내용내용내용내용내용내용내용내용내용 ||
1041|| blahblahblahblahblahblahblahblah ||
1042|| [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||}}}}}}||
1043|| '''결과''' ||{{{#!wiki
1044||<tablealign=right> '''1번 테이블''' ||
1045|| 내용내용내용내용내용내용내용내용내용 ||
1046|| blahblahblahblahblahblahblahblah ||
1047|| [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||
1048||<tablealign=right> '''2번 테이블''' ||
1049|| 내용내용내용내용내용내용내용내용내용 ||
1050|| blahblahblahblahblahblahblahblah ||
1051|| [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||}}}||
1052
1053첫 번째 혹은 모든 테이블에 대해 {{{wiki}}} 문법을 사용해 감싸면 개행을 방지하면서 여러 테이블을 나란히 배치할 수 있습니다.
1054||<tablewidth=100%><tablebordercolor=#00A495,#2d2f34><tablebgcolor=#fff,#1f2023><colbgcolor=#00A495,#010101><colcolor=#fff,#eee><width=60px> '''{{{#fff,#eee 문법}}}''' ||{{{#!folding [ 문법 펼치기 · 접기 ]
1055{{{{{{#!wiki
1056||<tablealign=right> '''1번 테이블''' ||
1057|| 내용내용내용내용내용내용내용내용내용 ||
1058|| blahblahblahblahblahblahblahblah ||
1059|| [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||}}}
1060||<tablealign=right> '''2번 테이블''' ||
1061|| 내용내용내용내용내용내용내용내용내용 ||
1062|| blahblahblahblahblahblahblahblah ||
1063|| [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||}}}}}}||
1064|| '''결과''' ||{{{#!wiki
1065{{{#!wiki
1066||<tablealign=right> '''1번 테이블''' ||
1067|| 내용내용내용내용내용내용내용내용내용 ||
1068|| blahblahblahblahblahblahblahblah ||
1069|| [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||}}}
1070||<tablealign=right> '''2번 테이블''' ||
1071|| 내용내용내용내용내용내용내용내용내용 ||
1072|| blahblahblahblahblahblahblahblah ||
1073|| [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||}}}||
1074
1075==== 왼쪽/중앙 정렬된 테이블 ====
1076여러 테이블을 중앙 정렬시키되 나란히 배치해야 하는 경우도 있습니다. 이 경우 자식 요소를 텍스트로 취급되게 하고, 부모 요소에서는 텍스트 중앙 정렬을 하여 해결할 수 있습니다.
1077여러 테이블을 왼쪽 정렬시키되 나란히 배치하는 경우도 같습니다.("text-align: left" 사용)
1078
1079||<tablewidth=100%><tablebordercolor=#00A495,#2d2f34><tablebgcolor=#fff,#1f2023><colbgcolor=#00A495,#010101><colcolor=#fff,#eee><width=60px> '''{{{#fff,#eee 문법}}}''' ||{{{#!folding [ 문법 펼치기 · 접기 ]
1080{{{{{{#!wiki style="text-align: center"
1081{{{#!wiki style="display: inline-block; margin: 0 10px"
1082|| '''테이블 1''' ||
1083|| 내용내용내용내용내용내용내용내용내용 ||
1084|| blahblahblahblahblahblahblahblah ||
1085|| [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||
1086}}}{{{#!wiki style="display: inline-block; margin: 0 10px"
1087|| '''테이블 2''' ||
1088|| 내용내용내용내용내용내용내용내용내용 ||
1089|| blahblahblahblahblahblahblahblah ||
1090|| [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||
1091}}}}}}}}}}}}||
1092|| '''결과''' ||{{{#!wiki style="text-align: center"
1093{{{#!wiki style="display: inline-block; margin: 0 10px"
1094|| '''테이블 1''' ||
1095|| 내용내용내용내용내용내용내용내용내용 ||
1096|| blahblahblahblahblahblahblahblah ||
1097|| [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||}}}{{{#!wiki style="display: inline-block; margin: 0 10px"
1098|| '''테이블 2''' ||
1099|| 내용내용내용내용내용내용내용내용내용 ||
1100|| blahblahblahblahblahblahblahblah ||
1101|| [[로렘 입숨|Lorem ipsum, dolor sit amet.]] ||}}}}}}||
1102
1103== [anchor(접기)]접기의 응용 ==
r2
NightZ
1104 * '''관련 기초 문법''': [[엔트리위키:문법 도움말#접기|접기 기초 문법]]
r1
NightZ

(새 문서) 		1105
1106 * {{{+1 '''응용 1:'''}}} 여백 제거
r2
NightZ
1107 엔트리위키는 기본적으로 표 자체가 가지고 있는 상하 여백[* 상하 10px, 2025.08. 기준], 표의 칸 내부에 상하좌우 여백[* 상하 5px, 좌우 10px, 2025.08. 기준]이 있습니다. 따라서 표 내에서 접기를 이용해 표를 추가로 넣을 때 상당히 넓은 여백이 생기는데, 이 여백을 wiki 틀 문법으로 제거할 수 있습니다.[* 표 테두리 경계선 및 텍스트 크기의 변화 등의 이유로 텍스트가 중심에서 떨어지거나 경계선의 굵기가 굵어지는 등의 문제가 발생할 시에는 문제가 생긴 방향의 여백 제거값에서 -1을 더하면 됩니다.[br]''예시)'' -10px에서 -11px로, -5px에서 -6px로, 0에서 -1px로.]
r1
NightZ

(새 문서) 		1108 ||<colbgcolor=#fc6><colcolor=#000><width=1><colkeepall> 문법 ||{{{#!folding [ 문법 펼치기 · 접기 ]
1109{{{||<keepall> {{{#!wiki style="margin: 0 -10px -5px; min-height: calc(1.5em + 5px)"
1110{{{#!folding [ 펼치기 · 접기 ]
1111{{{#!wiki style="margin: -5px -1px -11px"
1112||내용내용내용내용내용내용내용내용||
1113||내용내용내용내용내용내용내용내용||}}}}}}}}} ||}}}
1114 * min-height:calc(1.5em + 5px)
r2
NightZ
1115 접기가 위치한 틀의 최소 세로폭(min-height)을 엔트리위키 기본 한줄 높이 1.5em와 margin: ... -5px에서 지워진 5px을 더한 값으로 설정하여 일반적인 한줄 표 높이와 동일하게 맞춥니다.
r1
NightZ

(새 문서) 		1116 * 펼치기 접기를 넣을 셀의 너비가 '''펼치기 접기 문구가 원래 가져야 했을 여백 값 포함 너비'''보다 크고 '''가운데 정렬'''이어야 합니다. 이 예시는 '여백 제거 적용'이라는 윗셀의 텍스트가 있어서 충분히 넓고 접기 문법이 있는 셀이 가운데 정렬이라서 티가 나지 않지만, 윗셀을 없애고 {{{#red 충분한 너비를 확보하지 못하면}}} 아래처럼 보입니다.
1117 ||<tablebgcolor=#fff,#000><keepall> {{{#!wiki style="margin: 0 -10px -5px; min-height: calc(1.5em + 5px)"
1118{{{#!folding [ 펼치기 · 접기 ]
1119{{{#!wiki style="margin: -5px -1px -11px"
1120||내용내용내용내용내용내용내용내용||
1121||내용내용내용내용내용내용내용내용||}}}}}}}}} ||
1122 또한, 충분한 너비가 확보되더라도 다른 가운데 정렬이 아닌 {{{#red 왼쪽 정렬}}}을 사용하면 아래와 같이 보입니다.
1123 ||<tablebgcolor=#fff,#000> 여백 제거 적용 ||
1124 ||<keepall>{{{#!wiki style="margin: 0 -10px -5px; min-height: calc(1.5em + 5px)"
1125{{{#!folding [ 펼치기 · 접기 ]
1126{{{#!wiki style="margin: -5px -1px -11px"
1127||내용내용내용내용내용내용내용내용||
1128||내용내용내용내용내용내용내용내용||}}}}}}}}} ||
1129 프로필 표 같은 피치못할 사정으로 왼쪽 정렬을 꼭 사용해야 한다면 '[ 펼치기 · 접기 ]' 문구 앞쪽에 일반 띄어쓰기가 아닌 공백문자('⠀': 점자 패턴 공백 등)를 넣음으로써 접기 전 여백이 사라지는 문제를 완벽하지는 않지만 어색하지 않아 보이게 만들 수 있습니다.
1130 ||<tablewidth=400><width=100> '''항목''' ||<bgcolor=#fff,#000>{{{#!wiki style="margin: 0 -10px -5px; min-height: calc(1.5em + 5px)"
1131{{{#!folding ⠀[ 펼치기 · 접기 ]
1132{{{#!wiki style="margin: -5px -1px -11px"
1133||<tablewidth=100%>내용내용내용내용내용내용내용내용||
1134||내용내용내용내용내용내용내용내용||}}}}}}}}} ||
1135 * 기존 문법 {{{<^|1><height=32> {{{#!wiki style="margin: 0 -10px -5px" (내부 내용)}}}}}}의 height=32 옵션은 브라우저나 위키 스킨 설정에 따라 내부 글자 폰트의 크기가 달라지므로 일정한 높이를 구현할 수 없어 일정한 크기를 보장할 수 없기 때문에 좋지 않습니다.}}}||
1136 || 결과 ||{{{#!wiki style="display: inline-block; vertical-align: top"
1137||<tablebgcolor=#fff,#000> 여백 제거 미적용 ||
1138||<keepall> {{{#!folding [ 펼치기 · 접기 ]
1139|| 내용내용내용내용내용내용내용내용 ||
1140|| 내용내용내용내용내용내용내용내용 ||}}} ||}}} {{{#!wiki style="display: inline-block; vertical-align: top"
1141||<tablebgcolor=#fff,#000> 여백 제거 적용 ||
1142||<keepall> {{{#!wiki style="margin: 0 -10px -5px; min-height: calc(1.5em + 5px)"
1143{{{#!folding [ 펼치기 · 접기 ]
1144{{{#!wiki style="margin: -5px -1px -11px"
1145||내용내용내용내용내용내용내용내용||
1146||내용내용내용내용내용내용내용내용||}}}}}}}}} ||}}}||
1147
1148 * {{{+1 '''응용 2:'''}}} 여러 접기를 한 행에 넣기
1149 표의 한 칸에 여러 접기 틀을 합쳐 넣을 수 있습니다.
1150 ||<colbgcolor=#fc6><colcolor=#000><width=1><colkeepall> 문법 ||'''{{{#red 주의}}}''': 틀 안의 내용이 충분히 커야 합니다.
1151{{{#!folding [ 문법 펼치기 · 접기 ]
1152{{{||<width=300><bgcolor=#090> '''{{{#fff 표 제목}}}''' ||
1153||<keepall> {{{#!wiki style="display: inline-block"
1154{{{#!folding [ 틀 1 ]
1155틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용}}}
1156}}}{{{#!wiki style="display: inline-block"
1157{{{#!folding [ 틀 2 ]
1158틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용}}}
1159}}}{{{#!wiki style="display: inline-block"
1160{{{#!folding [ 틀 3 ]
1161틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용}}}
1162}}} ||}}}}}}||
1163 || 결과 ||{{{#!wiki
1164||<width=300><bgcolor=#090> '''{{{#fff 표 제목}}}''' ||
1165||<keepall> {{{#!wiki style="display: inline-block"
1166{{{#!folding [ 틀 1 ]
1167틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용}}}
1168}}}{{{#!wiki style="display: inline-block"
1169{{{#!folding [ 틀 2 ]
1170틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용}}}
1171}}}{{{#!wiki style="display: inline-block"
1172{{{#!folding [ 틀 3 ]
1173틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용}}}
1174}}} ||}}}||
1175 위의 방식을 그대로 쓰면 펼치기 접기 버튼의 간격이 좁습니다. 간격을 확보하기 위한 방법이 있습니다.
1176 아래 두 방법을 같이 적용하는 것이 가장 좋습니다. 예) [[틀:대한민국 관련 문서]]
1177
1178 * 방법 1
1179 버튼 대괄호 좌우에 띄어쓰기가 아닌 [[공백]] 문자[* '⠀': 점자 패턴 공백 [br] '　': 전각 공백 등등]을 넣으면 그 크기만큼 간격이 생깁니다.
1180 ||<colbgcolor=#fc6><colcolor=#000><width=1><colkeepall> 문법 ||{{{#!folding [ 문법 펼치기 · 접기 ]
1181{{{||<tablewidth=300><bgcolor=#090> '''{{{#fff 표 제목}}}''' ||
1182||<keepall> {{{#!wiki style="display: inline-block"
1183{{{#!folding ⠀[ 틀 1 ]⠀
1184틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용}}}
1185}}}{{{#!wiki style="display: inline-block"
1186{{{#!folding ⠀[ 틀 2 ]⠀
1187틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용}}}
1188}}}{{{#!wiki style="display: inline-block"
1189{{{#!folding ⠀[ 틀 3 ]⠀
1190틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용}}}
1191}}} ||}}}}}}||
1192 || 결과 ||{{{#!wiki
1193||<tablewidth=300><bgcolor=#090> '''{{{#fff 표 제목}}}''' ||
1194||<keepall> {{{#!wiki style="display: inline-block"
1195{{{#!folding ⠀[ 틀 1 ]⠀
1196틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용 틀 1 내용}}}
1197}}}{{{#!wiki style="display: inline-block"
1198{{{#!folding ⠀[ 틀 2 ]⠀
1199틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용 틀 2 내용}}}
1200}}}{{{#!wiki style="display: inline-block"
1201{{{#!folding ⠀[ 틀 3 ]⠀
1202틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용 틀 3 내용}}}
1203}}} ||}}}||
1204
1205 * 방법 2
1206 접기 틀 바깥의 wiki 틀에 min-width: (숫자)% 옵션을 줍니다. 최소한 (숫자)%의 너비를 보장하게 하는 옵션으로 숫자는 19(가로 5항목)~26(가로 3항목) 정도가 적당합니다.{{{#!wiki style="max-width: 1000px"
1207||<tablewidth=100%><colbgcolor=#fc6><colcolor=#000><width=1><colkeepall> 문법 ||{{{#!folding [ 문법 펼치기 · 접기 ]
1208{{{||<tablewidth=100%><bgcolor=#090> '''{{{#fff 표 제목}}}''' ||
1209||<keepall> {{{#!wiki style="display: inline-block; min-width: 25%"
1210{{{#!folding ⠀[ 틀 1 ]⠀
1211||<width=999> 틀 1 내용 틀 1 내용 ||
1212}}}
1213}}}{{{#!wiki style="display: inline-block; min-width: 25%"
1214{{{#!folding ⠀[ 틀 2 ]⠀
1215||<width=999> 틀 2 내용 틀 2 내용 ||
1216}}}
1217}}}{{{#!wiki style="display: inline-block; min-width: 25%"
1218{{{#!folding ⠀[ 틀 3 ]⠀
1219||<width=999> 틀 3 내용 틀 3 내용 ||
1220}}}}}} ||}}}}}}||
1221|| 결과 ||{{{#!wiki
1222||<tablewidth=100%><bgcolor=#090> '''{{{#fff 표 제목}}}''' ||
1223||<keepall> {{{#!wiki style="display: inline-block; min-width: 25%"
1224{{{#!folding ⠀[ 틀 1 ]⠀
1225||<width=999> 틀 1 내용 틀 1 내용 ||
1226}}}
1227}}}{{{#!wiki style="display: inline-block; min-width: 25%"
1228{{{#!folding ⠀[ 틀 2 ]⠀
1229||<width=999> 틀 2 내용 틀 2 내용 ||
1230}}}
1231}}}{{{#!wiki style="display: inline-block; min-width: 25%"
1232{{{#!folding ⠀[ 틀 3 ]⠀
1233||<width=999> 틀 3 내용 틀 3 내용 ||
1234}}}}}} ||}}}||
1235}}}
1236 * 방법 3
1237 Flexbox를 사용하여 접기 버튼 사이의 간격을 일정하게 만들 수 있습니다. "gap: 0 <숫자>"에 적절한 값을 넣으면 됩니다. 절대값과 상대값 모두 넣을 수 있습니다.{{{#!wiki style="max-width: 1000px"
1238||<tablewidth=100%><colbgcolor=#fc6><colcolor=#000><width=1><colkeepall> 문법 ||{{{#!folding [ 문법 펼치기 · 접기 ]
1239{{{||<tablewidth=100%><bgcolor=#090> '''{{{#fff 표 제목}}}''' ||
1240||<keepall> {{{#!wiki style="display: flex; flex-wrap: wrap; justify-content: center; gap: 0 30px"
1241{{{#!wiki
1242{{{#!folding ⠀[ 틀 1 ]⠀
1243||<width=999> 틀 1 내용 틀 1 내용 ||
1244}}}
1245}}}{{{#!wiki
1246{{{#!folding ⠀[ 틀 2 ]⠀
1247||<width=999> 틀 2 내용 틀 2 내용 ||
1248}}}
1249}}}{{{#!wiki
1250{{{#!folding ⠀[ 틀 3 ]⠀
1251||<width=999> 틀 3 내용 틀 3 내용 ||
1252}}}}}}}}} ||
1253}}}}}}||
1254|| 결과 ||{{{#!wiki
1255||<tablewidth=100%><bgcolor=#090> '''{{{#fff 표 제목}}}''' ||
1256||<keepall> {{{#!wiki style="display: flex; flex-wrap: wrap; justify-content: center; gap: 0 30px"
1257{{{#!wiki
1258{{{#!folding ⠀[ 틀 1 ]⠀
1259||<width=999> 틀 1 내용 틀 1 내용 ||
1260}}}
1261}}}{{{#!wiki
1262{{{#!folding ⠀[ 틀 22222 ]⠀
1263||<width=999> 틀 2 내용 틀 2 내용 ||
1264}}}
1265}}}{{{#!wiki
1266{{{#!folding ⠀[ 틀 333333333 ]⠀
1267||<width=999> 틀 3 내용 틀 3 내용 ||
1268}}}}}}}}} ||}}}||
1269}}}
1270 * 내부 접기들 안의 표 바깥 여백 삭제
1271 ||<colbgcolor=#fc6><colcolor=#000><width=1><colkeepall> 문법 ||{{{#!folding [ 문법 펼치기 · 접기 ]
1272{{{||<table bordercolor=#090><width=400><keepall> {{{#!wiki style="margin: 0 -10px -5px"
1273{{{#!wiki style="display: inline-table; min-width: 25%; min-height: calc(1.5em + 5px)"
1274{{{#!folding [ 표1 ]
1275{{{#!wiki style="margin: -5px 0"
1276||<table bordercolor=#fc6><width=1000> 표1 표1 표1 ||
1277}}}
1278}}}
1279}}}{{{#!wiki style="display: inline-table; min-width: 25%; min-height: calc(1.5em + 5px)"
1280{{{#!folding [ 표2 ]
1281{{{#!wiki style="margin: -5px 0"
1282||<table bordercolor=#fc6><width=1000> 표2 표2 표2 ||
1283}}}
1284}}}
1285}}}{{{#!wiki style="display: inline-table; min-width: 25%; min-height: calc(1.5em + 5px)"
1286{{{#!folding [ 표3 ]
1287{{{#!wiki style="margin: -5px 0 -10px"
1288||<table bordercolor=#fc6><width=1000> 표3 표3 표3 ||
1289}}}}}}}}}}}} ||}}}}}}
1290 * <width=9999>
1291 [[espejo]] 스킨 기준 컨텐츠가 들어갈 수 있는 공간의 최대 너비는 약 1518px입니다. 외부 틀의 tablewidth를 100%로 선언할 경우 내부 틀이 한 줄을 다 차지하기 위해서는 너비가 (1518px - 테두리 너비)보다 커야합니다. 예시에는 width를 9999로 선언했지만 1518보다 큰 아무 숫자나 선언해도 상관없습니다.
1292 외부 틀의 tablewidth가 절대값이라면 해당 값보다 적당이 큰 값을 내부 틀의 width에 선언하면 됩니다.
1293 * margin: -5px 0 -10px
1294 테이블에는 상하 10px의 외부 여백이 있으므로 이를 적절히 조절해야 합니다. 마지막 틀을 제외한 나머지 틀에는 "margin: -5px 0"를 선언해 접기 버튼의 상하에 셀의 기본 상하 내부 여백인 5px과 같은 여백을 주지만, 마지막 틀의 아랫쪽에는 여백이 있을 필요가 없으므로 10px의 여백을 모두 제거해야 합니다.
1295 margin에 값이 3개일 경우, 첫 번째부터 상, 좌우, 하 순서로 여백이 선언된 것입니다.[* [br]값이 1개: 상하좌우[br]값이 2개: 상하, 좌우[br]값이 4개: 상, 우, 하, 좌] 마지막 틀에 "margin: -5px 0 -10px"를 선언해 틀의 윗 외부 여백은 5px, 아래 여백은 0으로 만듧니다. ||
1296 || 결과 ||{{{#!wiki
1297||<table bordercolor=#090><tablewidth=100%><keepall> {{{#!wiki style="margin: 0 -10px -5px"
1298{{{#!wiki style="display: inline-table; min-width: 25%; min-height: calc(1.5em + 5px)"
1299{{{#!folding [ 표1 ]
1300{{{#!wiki style="margin: -5px 0"
1301||<table bordercolor=#fc6><width=9999> 표1 표1 표1 ||
1302}}}
1303}}}
1304}}}{{{#!wiki style="display: inline-table; min-width: 25%; min-height: calc(1.5em + 5px)"
1305{{{#!folding [ 표2 ]
1306{{{#!wiki style="margin: -5px 0"
1307||<table bordercolor=#fc6><width=9999> 표2 표2 표2 ||
1308}}}
1309}}}
1310}}}{{{#!wiki style="display: inline-table; min-width: 25%; min-height: calc(1.5em + 5px)"
1311{{{#!folding [ 표3 ]
1312{{{#!wiki style="margin: -5px 0 -10px"
1313||<table bordercolor=#fc6><width=9999> 표3 표3 표3 ||
1314}}}}}}}}}}}} ||}}}||
1315
1316== [[/TeX|수식]] ==
r2
NightZ
1317[include(틀:하위 문서, 문서명1=엔트리위키:문법 도움말/심화/TeX)]
r1
NightZ

(새 문서) 		1318[[TeX]]을 이용해서 수학식 등을 입력할 수 있습니다.
1319
1320== [anchor(html)]HTML을 이용하는 응용 텍스트 문법 ==
1321{{{#red '''경고'''}}}: 이 문법은 현재 지원 중이나 적용을 권장하지 않으며 '''차후에 지원이 종료될 수 있습니다.'''
1322
1323{{{{{{#!html (코드)}}}}}} 형태로 작성합니다. 코드를 열었다면 무조건 닫아야만 적용됩니다.
1324
r2
NightZ
1325[[HTML]]의 기본 구조 및 태그의 종류에 대한 내용은 엔트리마크 수준을 벗어나므로, [[HTML/태그]] 문서 또는 외부 자료를 참고하시기 바랍니다.
1326
1327적용되는 대상에 먼저 엔트리마크 적용이 되어있으면 [[HTML|html]] 태그가 적용이 안 되니 주의하십시오. 반대로 html을 적용하고 엔트리마크를 적용할 수는 있습니다. 단, 일부 사용할 수 없는 코드도 있습니다.
r1
NightZ

(새 문서) 		1328
1329새 렌더러 적용 후로 HTML 태그가 적용된 문자는 목차에서 표시되지 않으므로 주의하십시오. 또한 이것을 이용해 목차와 실제로 보이는 것이 다른 문단을 만들 수 있습니다.
1330
1331=== HTML 문법 무효화 ===
1332{{{#red '''주의'''}}}: 정식 문법이 아니며 지원 중단 가능성이 있는 비권장 문법입니다.
1333
1334{{{ {{{#!html 서술할 내용}}} }}}
1335
1336[[#마크업 미적용 텍스트|\{{{}}}]]와는 달리 [[../#문법 무효화|\\]]를 적용한 것처럼 나옵니다.
1337
r2
NightZ
1338||<colbgcolor=#fc6><colcolor=#000><width=50> 입력 ||{{{{{{#!html [[엔트리위키:문법 도움말/심화]] [* 각주도] {{{#red 색상도}}}[br]'''여러가지''' {{{+5 문법들}}} 전부 다 무효}}}}}}||
1339|| 출력 ||{{{#!html [[엔트리위키:문법 도움말/심화]] [* 각주도] {{{#red 색상도}}}[br]'''여러가지''' {{{+5 문법들}}} 전부 다 무효}}}||
r1
NightZ

(새 문서) 		1340
1341=== 텍스트 배경 색상 ===
1342{{{#red '''주의'''}}}: 정식 문법이 아니며 지원 중단 가능성이 있는 비권장 문법입니다.
1343
1344{{{ {{{#!html <span style="background-color: #배경색">서술할 내용</span>}}} }}}
1345
1346아래 표의 예시는 비교를 위하여 원본과 3배본을 함께 서술하였습니다.
1347||{{{{{{#!html <span style="background-color: #999">배경색 적용</span>}}}}}}
1348글자가 있는 부분(공백 포함)에만 배경색이 적용됩니다.
1349||<bgcolor=#ffffff> {{{#!html <span style="background-color: #999">배경색 적용</span>}}} {{{#!html <span style="background-color: #999; font-weight:700; font-size:300%">배경색 적용</span>}}} ||
1350[[틀:글배경]], [[틀:글배경b]], [[틀:글배경r]], [[틀:글배경br]]을 이용할 수도 있습니다.
1351
1352==== 텍스트 배경 색상과 다른 강조 문법의 중첩 ====
1353{{{#!html <span style="background-color: #EFEF00">서술할 내용1</span>}}}
1354{{{#!html <span style="color: #00AA00">서술할 내용2</span>}}}
1355{{{#!html <span style="color: #FFFFFF; background-color: #00AEE3">서술할 내용3</span>}}}
1356
1357||{{{{{{#!html <span style="background-color: #배경색">서술할 내용1</span>}}}}}}
1358{{{{{{#!html <span style="color: #글자색">서술할 내용2</span>}}}}}}
1359{{{{{{#!html <span style="color: #글자색; background-color: #배경색">서술할 내용3</span>}}}}}}||
1360
1361HTML 문법을 제대로 적지 않으면 평범한 글자가 됩니다. 중첩을 사용할 때 [[쌍반점|;(세미콜론)]] 뒤에 한 칸을 띄어 쓰면 됩니다. 이를 응용하여 다른 문법에 적용 가능합니다.
1362
r2
NightZ
1363{{{#red '''주의'''}}}: HTML 문법 안에 엔트리위키 문법을 같이 사용할 수 없습니다. '''ex)''' {{{#!html <span style="color: #FFFFFF; background-color: #009900">'''볼드체'''</span>}}}
r1
NightZ

(새 문서) 		1364
1365같이 쓰려면 {{{#!html <b><span style="color: #FFFFFF; background-color: #009900">볼드체</span></b>}}}
1366||{{{{{{#!html <b><span style="color: #FFFFFF; background-color: #009900">볼드체</span></b>}}}}}}||
1367이와 같이 {{{<b>}}}태그를 사용해야 합니다. 태그는 {{{{{{#!html <태그>}}}}}}와 같이 사용해야 합니다. [[#매개변수|틀에 매개변수]]를 입력할 때에는 {{{{{{#!html}}}}}} 없이 사용할 수 있습니다.
1368
1369||<-5><bgcolor=#fc6><color=#000> HTML 태그 ||
1370|| 시작 || 종료 || 예시 || 설명 || 대체 가능 문법 ||
1371|| <b> || </b> || {{{#!html <b>가나</b>다라}}} ||볼드체: 글자를 굵게 합니다. || {{{'''가나'''다라}}} ||
1372|| <i> || </i> || {{{#!html <i>가나</i>다라}}} ||이탤릭체: 글자를 기울게 합니다. || {{{''가나''다라}}} ||
1373|| <strong> || </strong> || {{{#!html <strong>가나</strong>다라}}} ||글자를 강조합니다.[* <b> 태그랑 차이 없음.] || {{{'''가나'''다라}}} ||
1374|| <em> || </em> || {{{#!html <em>가나</em>다라}}} ||글자를 기울입니다.[* <i> 태그랑 차이 없음.] || {{{''가나''다라}}} ||
r2
NightZ
1375|| <s> || </s> || {{{#!html <s>가나</s>다라}}} ||글자에 취소선을 추가합니다.[* 엔트리위키에서 제공하는 문법인 --취소선--이 아닌 글자 자체에 취소선을 입히는 태그입니다.] || {{{--가나--다라}}} ||
r1
NightZ

(새 문서) 		1376|| <sub> || </sub> || {{{#!html <sub>가나</sub>다라}}} ||아래 첨자를 정의합니다. || {{{,,가나,,다라}}} ||
1377|| <sup> || </sup> || {{{#!html <sup>가나</sup>다라}}} ||위 첨자를 정의합니다. || {{{^^가나^^다라}}} ||
1378|||| <br> || {{{#!html 가나<br>다라}}} ||<br>을 중심으로 개행합니다. || {{{가나[br]다라}}} ||
1379이 외에도 다양한 태그가 있습니다.
1380
1381아니면 괄호 밖에서 사용해야 합니다. '''{{{#!html <span style="color: #FFFFFF; background-color: #009900">볼드체</span>}}}'''
1382||{{{'''{{{#!html <span style="color: #FFFFFF; background-color: #009900">볼드체</span>}}}'''}}}||
1383
1384{{{#red '''주의'''}}}: 문서 목차에는 HTML 문법이 적용되지 않습니다.
1385
1386===# text-shadow를 사용하는 그림자 문법 #===
r2
NightZ
1387{{{#red '''주의'''}}}: 해당 문법들은 정식 문법이 아니며 지원 중단 가능성이 있는 비권장 문법입니다. 해당 shadow 문법은 [[엔트리위키:편집지침/특수 문서#둘러보기 틀|둘러보기 틀에서 사용이 불가능합니다.]]
r1
NightZ

(새 문서) 		1388
1389==== 텍스트 그림자 및 네온 효과 ====
1390일반적인 경우 [[틀:글무리]]를 이용하면 됩니다. 예시는 다음과 같습니다.
1391
1392||<rowbgcolor=#fc6,#fc6><rowcolor=#000><width=80%> 입력 || 출력 ||
r2
NightZ
1393||{{{[include(틀:글무리, 둘레=3, 그림자=00f, 글자=fff, 내용=여기로, 링크=엔트리위키)]}}} ||[include(틀:글무리, 둘레=3, 그림자=00f, 글자=fff, 내용=여기로, 링크=엔트리위키)] ||
r1
NightZ

(새 문서) 		1394
1395단, 다중 그림자 효과를 적용하는 상황처럼 부득이하게 필요한 경우 아래와 같은 문법을 이용할 수 있습니다.
1396{{{#!syntax html
1397{{{#!html <span style="text-shadow: 가로움직임px 세로움직임px 번짐정도px #그림자색; color:#글자색">서술할 내용</span>}}} }}}
r2
NightZ
1398엔트리위키에서는 px 단위의 값이 0이 아닐 때 항상 px를 써주어야 정상 표시됩니다. 표나 이미지의 크기를 정할 때와 같이, px를 생략하면 자동으로 픽셀 단위로 맞추어 주지는 않음에 주의해야 합니다. 글자색을 그대로 쓸 생각이면 {{{; color:#글자색}}}부분을 제외하면 됩니다. 아래 표의 예시는 비교를 위하여 원본과 3배본을 함께 서술하였습니다.
r1
NightZ

(새 문서) 		1399||{{{{{{#!html <span style="text-shadow: 3px 3px 0px #999">그림자 효과</span>}}}}}}
1400번짐이 없으면 그림자 효과가 됩니다.
1401||<bgcolor=#ffffff> {{{#!html <span style="text-shadow: 3px 3px 0px #999">그림자 효과</span>}}} {{{#!html <span style="text-shadow: 3px 3px 0px #999; font-weight:700; font-size:300%">그림자 효과</span>}}} ||
1402||{{{{{{#!html <span style="text-shadow: 0 0 6px #2BB; color:#066">네온 효과</span>}}}}}}
1403번짐 옵션을 6px 주어서 네온 사인 같은 효과를 얻습니다.
1404||<bgcolor=#ffffff> {{{#!html <span style="text-shadow: 0 0 6px #2BB; color:#066">네온 효과</span>}}} {{{#!html <span style="text-shadow: 0 0 6px #2BB; color:#066; font-weight:700; font-size:300%">네온 효과</span>}}} ||
1405||{{{{{{#!html <span style="text-shadow: 3px 3px 0px yellow, 6px 6px 9px #DA2; color:black">다중 효과</span>}}}}}}
1406그림자 + 번진 그림자(쉼표로 다중 적용)로 큰 글씨에서 진한 네온 효과
1407||<bgcolor=#999999> {{{#!html <span style="text-shadow: 3px 3px 0px yellow, 6px 6px 9px #DA2">다중 효과</span>}}} {{{#!html <span style="text-shadow: 3px 3px 0px yellow, 6px 6px 9px #DA2; color:black; font-weight:700; font-size:300%">다중 효과</span>}}} ||
1408
1409====# 텍스트 외곽선 효과 #====
1410{{{#red '''주의'''}}}: 정식 문법이 아니며 지원 중단 가능성이 있는 비권장 문법입니다.
1411
1412{{{#!wiki style="font-family: monospace;"
1413{\{\{#!wiki style="text-shadow: 외곽선두께px 0px #외곽선색, 0px 외곽선두께px #외곽선색, -외곽선두께px 0px #외곽선색, 0px -외곽선두께px #외곽선색, 외곽선두께px 외곽선두께px #외곽선색, 외곽선두께px -외곽선두께px #외곽선색, -외곽선두께px -외곽선두께px #외곽선색, -외곽선두께px 외곽선두께px #외곽선색; color:#글자색"
1414서술할 내용}\}\} }}}
r2
NightZ
1415엔트리위키에서는 px 단위의 값이 0이 아닐 때 항상 px를 써주어야 정상 표시됩니다. 표나 이미지의 크기를 정할 때와 같이, px를 생략하면 자동으로 픽셀 단위로 맞추어 주지는 않음에 주의해야 합니다.
r1
NightZ

(새 문서) 		1416글자색을 그대로 쓸 생각이면 ; color:#글자색부분을 제외하면 됩니다. 아래 표의 예시는 비교를 위하여 원본과 3배본을 함께 서술하였습니다.
1417
1418위의 그림자 효과를 응용한 방식입니다.
1419상, 하, 좌, 우, 좌상, 우상, 좌하, 우하의 8방으로 그림자를 모두 적용한 방식으로 외곽선처럼 표시됩니다.
1420이 중 상, 하, 좌, 우의 그림자 효과만 적용할 경우 픽셀 폰트처럼 외곽선이 표시됩니다.
1421
1422|| {{{#!wiki style="font-family: monospace;"
1423{\{\{#!wiki style="text-shadow: 1px 0px #fff, 0px 1px #fff, -1px 0px #fff, 0px -1px #fff, 1px 1px #fff, 1px -1px #fff, -1px -1px #fff, -1px 1px #fff; color:#11A048"
1424외곽선 효과1}\}\}}}} ||<bgcolor=#999> {{{#!wiki style="text-shadow: 1px 0px #fff, 0px 1px #fff, -1px 0px #fff, 0px -1px #fff, 1px 1px #fff, 1px -1px #fff, -1px -1px #fff, -1px 1px #fff; color:#11A048"
1425외곽선 효과1}}}{{{#!wiki style="text-shadow: 3px 0px #fff, 0px 3px #fff, -3px 0px #fff, 0px -3px #fff, 3px 3px #fff, 3px -3px #fff, -3px -3px #fff, -3px 3px #fff; color:#11A048; font-weight:700; font-size:300%"
1426외곽선 효과1}}} ||
1427|| {{{#!wiki style="font-family: monospace;"
1428{\{\{#!wiki style="text-shadow: 1px 0px #fff, 0px 1px #fff, -1px 0px #fff, 0px -1px #fff; color:#11A048"
1429외곽선 효과2}\}\} }}} ||<bgcolor=#999> {{{#!wiki style="text-shadow: 1px 0px #fff, 0px 1px #fff, -1px 0px #fff, 0px -1px #fff; color:#11A048"
1430외곽선 효과2}}}{{{#!wiki style="text-shadow: 3px 0px #fff, 0px 3px #fff, -3px 0px #fff, 0px -3px #fff; color:#11A048; font-weight:700; font-size:300%"
1431외곽선 효과2}}} ||
1432
1433===== 틀:글자 테두리 사용 =====
1434[include(틀:글자 테두리/설명 문서)]
1435해당 틀을 통해 간단하게 텍스트 외곽선 효과를 넣을 수 있습니다.
1436
1437==# 매크로 미지원 플랫폼에 동영상 삽입[anchor(동영상 심화)] #==
1438[include(틀:상세 내용, 문서명=틀:video)]
1439'''{{{#red 주의}}}''': 정식 문법이 아니며 지원 중단 가능성이 있는 비권장 문법입니다.
1440
r2
NightZ
1441[[엔트리위키:문법 도움말#동영상|매크로가 지원되지 않는]] 사이트의 동영상을 엔트리위키 문서 내에 첨부하고 싶다면, 일반적인 경우 [[틀:video]]를 이용해서 매개변수와 함께 include 하시면 됩니다.
r1
NightZ

(새 문서) 		1442
1443||<rowbgcolor=#fc6><rowcolor=#000><width=50%> 입력 || 출력 ||
1444||{{{[include(틀:video, src=https://rickroll.it/rickroll.mp4, width=320)]}}}
1445|| [include(틀:video, src=https://rickroll.it/rickroll.mp4, width=320)] ||
1446
1447마찬가지로 오디오도 [[틀:video]]를 이용해 첨부할 수 있습니다.
1448||<rowbgcolor=#fc6><rowcolor=#000><width=50%> 입력 || 출력 ||
1449||{{{[include(틀:video,src=https://www.mois.go.kr/cmm/fms/FileDown.do?atchFileId=FILE_000000000010854&fileSn=0, height=50, width=100%)]}}}
1450||[include(틀:video,src=https://www.mois.go.kr/cmm/fms/FileDown.do?atchFileId=FILE_000000000010854&fileSn=0, height=50, width=100%)]||
1451
1452하지만 필요한 경우, 아래와 같이 HTML 구문을 직접 이용해 동영상을 삽입하는 것도 가능합니다. (비권장)
1453
1454{{{방법 1.
1455{{{#!html <video src="동영상 주소"></video>}}}
1456
1457방법 2.
1458{{{#!html 동영상 플레이어 소스}}}
1459}}}
1460위와 같은 형식으로 문서 내의 원하는 위치에 쓰시면 됩니다. 문서 내에 쓰고 문서 저장을 하면 영상이 출력됩니다.
1461
r2
NightZ
1462 * 모든 페이지에서의 TLS(HTTPS) 통신을 지원하지 않는 사이트의 동영상 플레이어는 엔트리위키에서 나타나지 않습니다. [[https://namu.wiki/w/엔트리위키:보존문서/엔트리위키:연습장1?uuid=66ce513c-6e71-413c-a693-f404eb7c9a99|참고]] [[https://namu.wiki/raw/엔트리위키:보존문서/엔트리위키:연습장1?uuid=66ce513c-6e71-413c-a693-f404eb7c9a99|RAW]][* 2016년 7월 27일 확인]
1463
1464 * '''{{{#red 주의}}}''': 소리를 포함하고 있는 멀티미디어의 자동 재생(autoplay)은 엔트리위키 규정으로 금지되어 있습니다.
r1
NightZ

(새 문서) 		1465
1466== 틀 ==
1467[anchor(틀 관련)]
1468 * 아래 [[#매개변수|매개변수]] 문단과 함께 보시면 좋습니다.
1469 * 위의 [[#틀 관련 속성들|틀 관련 속성들]] 문단도 참고하시기 바랍니다.
1470
1471=== 기본 서식 ===
1472[include(틀:상세 내용, 설명=빠른 틀 생성을 위한 템플릿이 존재합니다., 문서명=템플릿:틀)]
1473{{{{{{#!wiki style="border: 1px solid gray; border-top: 5px solid orange; padding: 12px"
1474{{{+1 여기에 제목을 넣어주세요.}}}[br][br]여기에 내용을 넣어주세요.}}}}}}
1475{{{#!wiki style="border: 1px solid gray; border-top: 5px solid orange; padding: 12px"
1476{{{+1 여기에 제목을 넣어주세요.}}}[br][br]여기에 내용을 넣어주세요.}}}
1477
1478 * {{{style="border:1px solid (색 코드);border-top:5px solid (색 코드);padding:12px;"}}}
1479 테두리를 지정합니다. (색 코드) 부분에 원하는 색깔의 코드를 넣어 주면 됩니다. 아래는 많이 쓰이는 코드들 입니다. 또한 blue, red 같이 CSS 웹 색상 이름을 사용해도 됩니다. 틀을 만들 때 글자를 1개라도 틀리거나 빠트리면 틀이 정상적으로 표시되지 않습니다.
1480 * {{{#!wiki style="display: inline; background: orange; padding: 2px 3px; border-radius: 5px"
1481{{{#fff '''orange'''}}}}}}
1482 가장 일반적인 색으로, 주의 문구에 주로 쓰입니다. 예) [[틀:사건사고]]
1483 * {{{#!wiki style="display: inline; background: crimson; padding: 2px 3px; border-radius: 5px"
1484{{{#fff '''crimson'''}}}}}}
1485 orange보다 조금 더 강한 경고에 주로 쓰입니다. 예) [[틀:설명문서]]
1486 * {{{#!wiki style="display: inline; background: black; padding: 2px 3px; border-radius: 5px"
1487{{{#fff '''black'''}}}}}}
1488 crimson보다 조금 더 강한 경고에 주로 쓰입니다. 예) [[틀:이미지 라이선스/제한적 이용]]
1489 * {{{#!wiki style="display: inline; background: navy; padding: 2px 3px; border-radius: 5px"
1490{{{#fff '''navy'''}}}}}}
1491 black보다도 더 강한 경고에 주로 쓰입니다. 예) [[틀:MPOV]]
1492 * {{{#!wiki style="display: inline; background: gray; padding: 2px 3px; border-radius: 5px"
1493{{{#fff '''gray'''}}}}}}
1494 폐지, 부재 등 무언가가 없다는 의미에 주로 쓰입니다. 예) [[틀:폐선]]
1495 * {{{#!wiki style="display: inline; background: yellowgreen; padding: 2px 3px; border-radius: 5px"
1496{{{#000 '''yellowgreen'''}}}}}}, {{{#!wiki style="display: inline; background: green; padding: 2px 3px; border-radius: 5px"
1497{{{#fff '''green'''}}}}}}
1498 편집상의 주의 문구에 주로 쓰입니다. 예) [[틀:오락실 목록]], [[틀:토론 합의]]
1499 * {{{#!wiki style="display: inline; background: #f77; padding: 2px 3px; border-radius: 5px"
1500{{{#000 '''#FF7777'''}}}}}}
1501 성적 요소가 있음을 알릴 때 주로 사용됩니다. 예) [[틀:선정성]]
1502 * {{{#!wiki style="display: inline; background: #00a495; padding: 2px 3px; border-radius: 5px"
1503{{{#fff '''#00A495'''}}}}}}
r2
NightZ
1504 엔트리위키의 공식 문서 등에 주로 쓰입니다. 예) [[틀:공식 문서]]
r1
NightZ

(새 문서) 		1505 * 영관급 지휘관에 대한 각 군별 표식입니다. 주로 역대 (부)사령관 및 참모장 · 학교장 등에 사용됩니다.
1506 예) [[틀:국군의무사령관]], [[틀:인천해역방어사령관]], [[틀:육군사관학교장]], [[틀:해군사관학교장]]
1507 * 육군 - {{{#!wiki style="padding: 2px 5px; border-radius: 5px; display: inline; background: #2A5034"
1508[[파일:대령 계급장.svg|width=30]]}}}, {{{#!wiki style="padding: 2px 5px; border-radius: 5px; display: inline; background: #2A5034"
1509[[파일:중령 계급장.svg|width=30&height=18]]}}}
1510 * 해군 - {{{#!wiki style="padding: 2px 5px; border-radius: 5px; display: inline; background: #003399"
1511[[파일:대령 계급장.svg|width=30]]}}}, {{{#!wiki style="padding: 2px 5px; border-radius: 5px; display: inline; background: #003399"
1512[[파일:중령 계급장.svg|width=30&height=18]]}}}
1513 * 해병대 - {{{#!wiki style="padding: 2px 5px; border-radius: 8px; border: 2px solid #ffd700; display: inline; background: #ff0000" dark-style="padding: 2px 5px; border-radius: 8px; border: 2px solid #aa9872; display: inline; background: #d10000"
1514[[파일:대령 계급장.svg|width=30]]}}}, {{{#!wiki style="padding: 2px 5px; border-radius: 8px; border: 2px solid #ffd700; display: inline; background: #ff0000" dark-style="padding: 2px 5px; border-radius: 8px; border: 2px solid #aa9872; display: inline; background: #d10000"
1515[[파일:중령 계급장.svg|width=30&height=18]]}}}
1516 * 공군 - {{{#!wiki style="padding: 2px 5px; border-radius: 5px; display: inline; background: #009dd1" dark-style="padding: 2px 5px; border-radius: 5px; display: inline; background: #006f94"
1517[[파일:대령 계급장.svg|width=30]]}}}, {{{#!wiki style="padding: 2px 5px; border-radius: 5px; display: inline; background: #009dd1" dark-style="padding: 2px 5px; border-radius: 5px; display: inline; background: #006f94"
1518[[파일:중령 계급장.svg|width=30&height=18]]}}}
1519 * [[#s-4.2|텍스트 크기 문법]]을 이용하여 제목 크기 조절이 가능합니다. {{{{{{+1 여기에 제목을 넣어 주세요.}}}}}} 처럼 사용할 수 있습니다.
1520 * 제목과 내용 사이에 한 줄을 띄워 주세요. {{{[br][br]}}} 처럼 줄 바꿈 매크로를 두 번 사용하면 됩니다.
1521
1522== 매개변수 ==
r2
NightZ
1523 * '''관련 기초 문법''': [[엔트리위키:문법 도움말#틀·문서 삽입|틀·문서 삽입]] (include 매크로)
r1
NightZ

(새 문서) 		1524
1525[[일반 틀]], [[기호 틀]], [[양식상자 틀]], [[기타 문법 틀]] 등에서 매개변수를 설정할 때 {{{#!html <span style="font-family: monospace;">&commat;매개변수&commat;</span>}}} 꼴로 선언할 수 있습니다.
1526
1527틀이 삽입될 문서 내에서 매개변수를 이용하기 위해서는 {{{매개변수=값}}}의 형태로 값을 넘겨주면 됩니다. '값' 자리에 아무것도 입력하지 않으면 아무것도 출력되지 않습니다. 또한, '값'에 해당하는 문자열에 쉼표({{{,}}})가 포함되어 있을 경우 제대로 표시되지 않습니다. 쉼표 앞에 [[백슬래시]]를 붙여 {{{\,}}}로 쓰면 해결됩니다.
1528
1529디폴트 매개 변수는 {{{#!html <span style="font-family: monospace;">&commat;매개변수=디폴트값&commat;</span>}}} 형태로 선언합니다.[* C++, Python 등에서 디폴트 매개 변수를 선언하는 방법과 유사합니다.]
1530
1531||<tablewidth=100%><tablebgcolor=transparent><rowbgcolor=#f5f5f5,#2d2f34><width=50%><-5> '''구문''' ||<width=50%><-5> '''출력''' ||
1532||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1533\{\{\{선택한 과일은 {{{#!html <span style="font-family: monospace;">&commat;fruit&commat;</span>}}}입니다.\}\}\} }}} ||선택한 과일은 멜론입니다. ||
1534||<bgcolor=#f5f5f5,#2d2f34><width=9%> '''호출''' ||<-9>{{{[include(틀:선택한 과일, fruit=멜론)]}}}||
1535||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-9>매개변수 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1536{{{fruit}}}}}}의 값을 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1537{{{멜론}}}}}}으로 지정해서 출력합니다.||
1538||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1539\{\{\{선택한 과일은 {{{#!html <span style="font-family: monospace;">&commat;fruit=멜론&commat;</span>}}}입니다.\}\}\} }}} ||선택한 과일은 수박입니다. ||
1540||<bgcolor=#f5f5f5,#2d2f34><width=9%> '''호출''' ||<-9>{{{[include(틀:선택한 과일, fruit=수박)]}}}||
1541||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-9>매개변수 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1542{{{fruit}}}}}}의 값을 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1543{{{수박}}}}}}으로 지정해서 출력합니다. 값을 지정하지 않으면 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1544{{{멜론}}}}}}으로 출력됩니다. ||
1545
1546----
r2
NightZ
1547{{{#red '''주의'''}}}: 엔트리마크(엔트리위키 자체 문법)에는 매개변수를 사용할 수 없습니다. 예를 들어, 셀의 배경색에 {{{#!html <span style="font-family: monospace;">&lt;bgcolor=&commat;배경색=#00a495&commat;&gt;</span>}}}와 같은 매개변수를 지정할 수 없습니다.
1548
1549{{{#red '''주의'''}}}: [[엔트리위키:문법 도움말#하이퍼링크|하이퍼링크]]에 매개변수를 사용하는 경우, 문단 및 앵커로의 링크는 지원되지 않습니다. 예를 들어 {{{엔트리위키#s-1}}}이라고 입력하면 [[엔트리위키#s-1|'엔트리위키' 문서의 1번 문단]]이 아니라 입력한 그대로인 '엔트리위키\#s-1'라는 이름을 가진 문서로 링크가 걸리게 됩니다. 문단 및 앵커 링크를 사용하려면 문단/앵커를 인수로 받는 매개변수를 추가해야 합니다.
r1
NightZ

(새 문서) 		1550
1551[include(틀:문서 가져옴, this=문단, title=틀:다른 뜻/설명문서, version=312, uuid=92ac931c-4534-49b9-bc17-9efc6d2d4812, paragraph=1)]
1552
1553== if 문법[anchor(if)] ==
1554주어진 표현식이 참 또는 참에 준하는 값으로 평가될 때, {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1555{{{if}}}}}} 문법 내부의 내용이 출력되는 [[조건문(프로그래밍)|조건문]]입니다.
1556
1557표현식에서 허용되는 [[자료형]]은 숫자([[정수]], [[소수(기수법)|소수]]), [[문자열]], [[Null(프로그래밍 언어)|null]] 등이 있습니다. 문자열은 기본적으로 [[큰따옴표]]와 [[작은따옴표]]를 둘다 사용할 수 있습니다. 즉 {{{"a"}}}는 {{{'a'}}}와 같습니다.
1558
1559{{{[include()]}}} 문법 등을 이용한 틀 삽입시 전달되는 변수는 기본적으로 문자열형으로 선언되어 있으므로, 수에 대한 연산을 수행하려면 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1560{{{(+num)}}}}}}, {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1561{{{(num * 1)}}}}}}, {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1562{{{(num / 1)}}}}}} 등의 방법을 사용하여 수치형으로 변환해야 합니다.
1563
1564또한 표현식에서 소수 매개변수를 활용하고자 하는 경우 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1565{{{(num * 1.0)}}}}}}, {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1566{{{(num / 1.0)}}}}}}과 같이 매개변수를 소수 자료형으로 변환해야 하며, 해당 소수 매개변수와 연산되는 피연산자도 소수 자료형으로 입력해야 합니다. (예시: {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1567{{{num * 1.0 > 3.0}}}}}})
1568
1569주의할 점은 이렇게 변환할 경우 매개변수가 설정되지 않았거나[* {{{[include(틀:연산)]}}}처럼 매개변수 없이 호출한 경우 {{{num = null}}}이 되어 {{{+null == 0}}}이 된다.] 빈 문자열일 경우[* {{{[include(틀:연산, num=,)]}}}처럼 템플릿 등에서 비워놓은 대로 호출한 경우 {{{num = ""}}}이 되어 {{{+"" == 0}}}이 된다.] 값이 0이 되기 때문에, 숫자 비교 조건에 0이 포함될 경우 추가 조건({{{&& num != null && num != ""}}}) 설정이 필요할 수 있습니다. 일반적으로 틀 삽입으로 매개변수를 전달할 시 값에 좌우 공백이 제거되므로, null 검사만 수행해도 대부분의 예외를 방지할 수 있습니다.
1570
1571if 문법에서는 틀로 넘겨진 모든 매개변수를 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1572{{{this}}}}}} 변수로도 참조할 수 있습니다.[[https://feedback.theseed.io/posts/1570/if-munbeobyi-byeonsumyeongi-thisil-ddae-jagdong-andoem|#]] 예를 들어 include 문법을 통해 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1573{{{A}}}}}} 매개변수로 넘겨진 값은 수식 내에서 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1574{{{this.A}}}}}}, {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1575{{{this['A']}}}}}}로도 참조할 수 있습니다. 특히 매개변수명이 JavaScript 식별자 규칙에 위배되는 경우에 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1576{{{this['매개변수명']}}}}}}으로 참조할 수 있습니다.
1577
1578=== 진리값 ===
1579기본적으로 참 또는 거짓을 의미하는 {{{true}}}와 {{{false}}} 두 개의 [[진릿값]]이 존재합니다. if문법 내부의 표현식을 평가했을 때 최종 결과가 {{{true}}}가 나온다면 안쪽의 내용이 보여지고, {{{false}}}가 나온다면 안쪽의 내용이 숨겨지게 됩니다.
1580
1581수식의 최종 결과가 {{{true}}} 또는 {{{false}}}가 아닌 숫자, 문자 등 다른 값이 나오게 된다면 적절한 규칙을 따라 {{{true}}} 또는 {{{false}}} 중 하나로 해석하게 되며, {{{true}}}로 해석되는 것을 참값(truthy), {{{false}}}로 해석되는 것을 거짓값(falsy)이라고 합니다. 대표적인 거짓값으로는 {{{0}}}, {{{null}}}, {{{""}}}([[공문자열]]) 등이 있으며, 그 외의 경우는 대부분 참값입니다.
1582||<tablewidth=100%><tablebgcolor=transparent><rowbgcolor=#f5f5f5,#2d2f34><width=10%> '''유형''' ||<-5><width=45%> '''구문''' ||<width=45%> '''출력''' ||
1583||<|2> {{{true}}} ||<-5>{{{#!wiki style="font-family: monospace;"
1584{\{\{#!if true
1585true는 참값입니다.}\}\} }}} ||{{{#!if true
1586true는 참값입니다.}}} ||
1587||<bgcolor=#f5f5f5,#2d2f34><keepall><width=9%> '''해설''' ||<-5>{{{true}}}는 참값이므로 출력됩니다.||
1588||<|2> {{{false}}} ||<-5>{{{#!wiki style="font-family: monospace;"
1589{\{\{#!if false
1590false는 거짓값입니다.}\}\} }}} ||{{{#!if false
1591false는 거짓값입니다.}}} ||
1592||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>{{{false}}}는 거짓값이므로 출력되지 않습니다.||
1593||<|4> {{{null}}} ||<-5>{{{#!wiki style="font-family: monospace;"
1594{\{\{#!if null
1595null은 거짓값입니다.}\}\} }}} ||{{{#!if null
1596null은 거짓값입니다.}}} ||
1597||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>{{{null}}}은 거짓값이므로 출력되지 않습니다.||
1598||<-5>{{{#!wiki style="font-family: monospace;"
1599{\{\{#!if abc
1600abc 변수가 정의되어 있지 않습니다.}\}\} }}} ||{{{#!if abc
1601abc 변수가 정의되어 있지 않습니다.}}} ||
1602||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>{{{[include()]}}} 등으로 삽입되었을 시 값이 전달되지 않은 변수는 기본적으로 {{{null}}}값을 가집니다.||
1603||<|2> {{{0}}}[br]{{{-0}}} ||<-5>{{{#!wiki style="font-family: monospace;"
1604{\{\{#!if 0
16050은 거짓값입니다.}\}\} }}} ||{{{#!if 0
16060은 거짓값입니다.}}} ||
1607||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>{{{0}}}, {{{-0}}} 등은 거짓값이므로 출력되지 않습니다.||
1608||<|2> {{{0.0}}} ||<-5>{{{#!wiki style="font-family: monospace;"
1609{\{\{#!if 0.0
16100.0은 거짓값입니다.}\}\} }}} ||{{{#!if 0.0
16110.0은 거짓값입니다.}}} ||
1612||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>{{{0.0}}}은 거짓값이므로 출력되지 않습니다. 참고로, {{{0 != 0.0}}}입니다.||
1613||<|2> {{{NaN, -NaN}}} ||<-5>{{{#!wiki style="font-family: monospace;"
1614{\{\{#!if NaN
1615NaN은 거짓값입니다.}\}\} }}} ||{{{#!if NaN
1616NaN은 거짓값입니다.}}} ||
r2
NightZ
1617||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>엔트리위키 문법에서 [[NaN]]은 거짓값이므로 출력되지 않습니다.||
r1
NightZ

(새 문서) 		1618||<|2> {{{Infinity, -Infinity}}} ||<-5>{{{#!wiki style="font-family: monospace;"
1619{\{\{#!if Infinity
1620Infinity는 참값입니다.}\}\} }}} ||{{{#!if Infinity
1621Infinity는 참값입니다.}}} ||
r2
NightZ
1622||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>엔트리위키 문법에서 [[Infinity]]는 참값이므로 출력됩니다.||
r1
NightZ

(새 문서) 		1623||<|2> {{{""}}}[br]{{{''}}} ||<-5>{{{#!wiki style="font-family: monospace;"
1624{\{\{#!if ""
1625빈 문자열은 거짓값입니다.}\}\} }}} ||{{{#!if ""
1626빈 문자열은 거짓값입니다.}}} ||
1627||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>{{{""}}}, {{{''}}} 등 빈 문자열은 거짓값이므로 출력되지 않습니다.||
1628
1629{{{#red '''주의'''}}}: NaN과 Infinity에 관련된 연산에서 IEEE 754와 불일치하는 결과를 출력하는 경우가 있으므로 식의 작성에 주의해야 합니다.
1630
1631=== 대입 연산 ===
1632If 문법에서 변수를 선언하고 대입 연산을 진행할 수 있으며, 이렇게 선언된 변수는 이하 if 문법 선언 시에도 계속 유지됩니다.[[https://feedback.theseed.io/posts/1576/if-munbeobe-elsewa-else-if-elif-munbeob-cuga|#]] 또한 선언한 변수는 {{{#!html <span style="font-family: monospace;">&commat;매개변수&commat;</span>}}} 문법을 이용하여 출력할 수도 있습니다.
1633
1634복합 대입 연산자({{{+=}}}, {{{||=}}} 등)도 이용할 수 있습니다.
1635
1636이를 응용하여 복잡한 조건식을 변수로 대입한 뒤, 이후 if 문법에서 부정 연산자를 이용하여 {{{else if}}}나 {{{else}}} 문법처럼 구현할 수 있습니다.
1637
1638{{{#red '''주의'''}}}: 변수 이름을 선언할 때 [[https://developer.mozilla.org/ko/docs/Glossary/Identifier|JavaScript 식별자 규칙]]을 따라야 합니다. 즉 숫자가 앞에 오는 변수 이름 등은 유효하지 않습니다.
1639
1640||<tablewidth=100%><tablebgcolor=transparent><rowbgcolor=#f5f5f5,#2d2f34><-5><width=50%> '''구문''' ||<width=50%> '''출력''' ||
1641||<-5>{{{#!wiki style="font-family: monospace;"
1642{\{\{#!if a = true
1643a는 true입니다.}\}\}
1644{\{\{#!if b = false
1645b는 false입니다.}\}\} }}} ||{{{#!if a = true
1646a는 true입니다.}}}
1647{{{#!if b = false
1648b는 false입니다.}}} ||
1649||<bgcolor=#f5f5f5,#2d2f34><keepall><width=9%> '''해설''' ||<-5>변수 {{{a}}}, {{{b}}}에 각각 {{{true}}}, {{{false}}}가 대입됩니다. 참값인 {{{a = true}}}만 출력됩니다.||
1650||<-5>{{{#!wiki style="font-family: monospace;"
1651{\{\{#!if c = true
1652c는 true입니다.}\}\}
1653{\{\{#!if c
1654c는 여전히 true입니다.}\}\}
1655{\{\{#!if c = false
1656이제 c는 false입니다.}\}\}
1657{\{\{#!if c
1658c가 여전히 false이므로 출력되지 않습니다.}\}\} }}} ||{{{#!if c = true
1659c는 true입니다.}}}
1660{{{#!if c
1661c는 여전히 true입니다.}}}
1662{{{#!if c = false
1663이제 c는 false입니다.}}}
1664{{{#!if c
1665c가 여전히 false이므로 출력되지 않습니다.}}} ||
1666||<bgcolor=#f5f5f5,#2d2f34><keepall><width=9%> '''해설''' ||<-5>변수 {{{c}}}에 {{{true}}}가 대입된 뒤, 다음 if 문법 선언 시에도 유지됩니다. 이후 {{{c}}}에 {{{false}}}를 대입하면 마찬가지로 다른 대입 연산 전까지 계속 {{{false}}}로 유지됩니다.||
1667||<-5>{{{#!wiki style="font-family: monospace;"
1668{\{\{#!if d = ("true인 조건식...")
1669d는 true인 조건식입니다.}\}\}{\{\{#!if !d
1670d(true)의 부정이므로 출력되지 않습니다.}\}\}
1671{\{\{#!if e = (!"false인 조건식...")
1672e는 false인 조건식이므로 출력되지 않습니다.}\}\}{\{\{#!if !e
1673e(false)의 부정이므로 출력됩니다.}\}\} }}} ||{{{#!if d = (true || "true인 조건식...")
1674d는 true인 조건식입니다.}}}{{{#!if !d
1675d(true)의 부정이므로 출력되지 않습니다.}}}
1676{{{#!if e = (false && "false인 조건식...")
1677e는 false인 조건식이므로 출력되지 않습니다.}}}{{{#!if !e
1678e(false)의 부정이므로 출력됩니다.}}} ||
1679||<bgcolor=#f5f5f5,#2d2f34><keepall><width=9%> '''해설''' ||<-5>위의 성질을 이용해 변수에 조건식을 대입하고 이후 if 문법에서 변수를 부정해 else를 구현할 수 있습니다. {{{d}}}는 조건식이 {{{true}}}인 경우, {{{e}}}는 조건식이 {{{false}}}인 경우에 해당합니다.||
1680||<-5>{{{#!wiki style="font-family: monospace;"
1681{\{\{#!if f = (!"false인 if 조건식")
1682if 불만족. else if로.}\}\}{\{\{#!if g = !f && (!"false인 else if 1 조건식")
1683else if 1 불만족. 다음 else if로.}\}\}{\{\{#!if h = !(f || g) && ("true인 else if 2 조건식")
1684else if 2 만족. 출력.}\}\}{\{\{#!if !(f || g || h)
1685위에서 만족. else 미출력.}\}\} }}} ||{{{#!if f = (!"false인 if 조건식")
1686if 불만족. else if로.}}}{{{#!if g = !f && (!"false인 else if 1 조건식")
1687else if 1 불만족. 다음 else if로.}}}{{{#!if h = !(f || g) && ("true인 else if 2 조건식")
1688else if 2 만족. 출력.}}}{{{#!if !(f || g || h)
1689위에서 만족. else 미출력.}}} ||
1690||<bgcolor=#f5f5f5,#2d2f34><keepall><width=9%> '''해설''' ||<-5>응용하여 {{{now = !(prev1 || prev2 || ...) && (조건)}}} 꼴로 else if를 구현할 수 있습니다.[* else if 구문의 개수가 많아 {{{!(prev1 || ...)}}} 부분이 길어진다면, 쉼표 연산자를 활용하여 {{{now = !prev && (조건), prev ||= now, now}}}와 같이 처리하는 것이 더 간단할 수 있습니다.([[https://namu.wiki/w/%EB%82%98%EB%AC%B4%EC%9C%84%ED%82%A4:%EC%97%B0%EC%8A%B5%EC%9E%A5?uuid=f9fb099a-c424-4415-a1fd-52cf1f2f5de9|참고]])]||
1691
1692=== 비교 연산 ===
1693||<tablewidth=100%><tablebgcolor=transparent><rowbgcolor=#f5f5f5,#2d2f34><width=10%> '''유형''' ||<-5><width=45%> '''구문''' ||<width=45%> '''출력''' ||
1694||<|6> {{{==}}}[br](같음) ||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1695\{\{\{#!if fruit == "멜론"
1696선택한 과일은 멜론입니다.\}\}\} }}} ||선택한 과일은 멜론입니다. ||
1697||<bgcolor=#f5f5f5,#2d2f34><width=9%> '''호출''' ||<-5>{{{[include(틀:비교 연산, fruit=멜론)]}}}||
1698||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>문자형 변수 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1699{{{fruit}}}}}}의 값이 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1700{{{멜론}}}}}}인 경우에만 출력됩니다.||
1701||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1702\{\{\{#!if fruit == null
1703선택한 과일이 없습니다.\}\}\} }}} ||선택한 과일이 없습니다. ||
1704||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:비교 연산)]}}}||
1705||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>{{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1706{{{fruit}}}}}} 변수에 값을 지정하지 __않은__ 경우에만 출력됩니다. 값을 지정하면 출력되지 않습니다.||
1707||<|6> {{{!=}}}[br](다름) ||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1708\{\{\{#!if fruit != "멜론"
1709선택한 과일은 멜론이 아닙니다. {{{@}}}fruit{{{@}}}입니다.\}\}\} }}} ||선택한 과일은 멜론이 아닙니다. 수박입니다. ||
1710||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:비교 연산, fruit=수박)]}}}||
1711||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>문자형 변수 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1712{{{fruit}}}}}}의 값이 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1713{{{멜론}}}}}}이 __아닌__ 경우에만 출력됩니다.||
1714||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1715\{\{\{#!if fruit != null
1716선택한 과일은 {{{@}}}fruit{{{@}}}입니다.\}\}\} }}} ||선택한 과일은 수박입니다. ||
1717||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:비교 연산, fruit=수박)]}}}||
1718||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>{{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1719{{{fruit}}}}}} 변수에 값을 지정한 경우에만 출력됩니다. 값을 지정하지 않으면 출력되지 않습니다.||
1720||<|3><keepall> {{{>}}}[br](큼) ||<-5>{{{#!wiki style="font-family: monospace;"
1721{\{\{#!if (+num) > 5
1722{{{@}}}num{{{@}}}은 5보다 큽니다.}\}\} }}} ||7은 5보다 큽니다. ||
1723||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:비교 연산, num=7)]}}}||
1724||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>{{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1725{{{num}}}}}} 변수의 값이 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1726{{{5}}}}}}보다 큰 경우 출력됩니다. ||
1727||<|3><keepall> {{{>=}}}[br](크거나 같음) ||<-5>{{{#!wiki style="font-family: monospace;"
1728{\{\{#!if (+num) >= 5
1729{{{@}}}num{{{@}}}은 5보다 크거나 같습니다.}\}\} }}} ||7은 5보다 크거나 같습니다. ||
1730||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:비교 연산, num=7)]}}}||
1731||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>{{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1732{{{num}}}}}} 변수의 값이 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1733{{{5}}}}}}보다 크거나 같은 경우 출력됩니다. ||
1734||<|3><keepall> {{{<}}}[br](작음) ||<-5>{{{#!wiki style="font-family: monospace;"
1735{\{\{#!if (+num) < 5
1736{{{@}}}num{{{@}}}은 5보다 작습니다.}\}\} }}} ||3은 5보다 작습니다. ||
1737||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:비교 연산, num=3)]}}}||
1738||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>{{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1739{{{num}}}}}} 변수의 값이 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1740{{{5}}}}}}보다 작은 경우 출력됩니다.[*0포함조건 num에 대한 null 및 "" 체크가 필요할 수 있습니다.] ||
1741||<|3><keepall> {{{<=}}}[br](작거나 같음) ||<-5>{{{#!wiki style="font-family: monospace;"
1742{\{\{#!if (+num) <= 5
1743{{{@}}}num{{{@}}}은 5보다 작거나 같습니다.}\}\} }}} ||3은 5보다 작거나 같습니다. ||
1744||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:비교 연산, num=3)]}}}||
1745||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>{{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1746{{{num}}}}}} 변수의 값이 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1747{{{5}}}}}}보다 작거나 같은 경우 출력됩니다.[*0포함조건] ||
1748
1749=== 논리 연산 ===
1750||<tablewidth=100%><tablebgcolor=transparent><rowbgcolor=#f5f5f5,#2d2f34><width=10%> '''유형''' ||<-5><width=45%> '''구문''' ||<width=45%> '''출력''' ||
1751||<|6> {{{&&}}}[br]{{{(논리곱)}}} ||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1752{\{\{#!if fruit1 == "멜론" && fruit2 == "수박"
1753선택한 과일은 멜론과 수박입니다.}\}\} }}} ||선택한 과일은 멜론과 수박입니다. ||
1754||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''호출''' ||<-5>{{{[include(틀:논리 연산, fruit1=멜론, fruit2=수박)]}}}||
1755||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''해설''' ||<-5>{{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1756{{{fruit1}}}}}} 변수의 값이 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1757멜론}}}, __그리고__ {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1758{{{fruit2}}}}}} 변수의 값이 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1759수박}}}인 경우에만 출력됩니다. 두 조건 중 하나라도 만족하지 않으면 출력되지 않습니다. ||
1760||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1761{\{\{#!if result = fruit && beverage && "화채"
1762{{{@}}}fruit{{{@}}}과 {{{@}}}beverage{{{@}}}로 {{{@}}}result{{{@}}}를 만들 수 있습니다.}\}\} }}} ||수박과 사이다로 화채를 만들 수 있습니다. ||
1763||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''호출''' ||<-5>{{{[include(틀:화채 재료, fruit=수박, beverage=사이다)]}}}||
1764||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''해설''' ||<-5>{{{&&}}}는 왼쪽 식의 값이 거짓값일 경우 왼쪽 식의 값을, 참값일 경우 오른쪽 식의 값을 반환합니다.[br]이 예시에서는 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1765{{{fruit}}}}}} 변수의 값이 참값이므로 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1766{{{beverage}}}}}} 변수의 값을 반환하며, 반환된 값이 참값이므로 다시 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1767"화채"}}}를 반환하여 최종적으로 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1768{{{result}}}}}} 변수에 값이 입력됩니다. {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1769{{{fruit}}}}}}와 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1770{{{beverage}}}}}} 둘 중 하나라도 거짓값이라면 그 값이 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1771{{{result}}}}}}에 입력되고, 본문이 출력되지 않습니다. ||
1772||<|3> {{{||}}}[br]{{{(논리합)}}} ||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1773{\{\{#!if fruit == "멜론" || fruit == "수박"
1774선택한 과일은 멜론 또는 수박입니다.}\}\} }}} ||선택한 과일은 멜론 또는 수박입니다. ||
1775||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''호출''' ||<-5>{{{[include(틀:논리 연산, fruit=멜론)]}}}||
1776||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''해설''' ||<-5>{{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1777{{{fruit}}}}}} 변수의 값이 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1778멜론}}} __또는__ {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1779수박}}}인 경우에만 출력됩니다. 이외의 값을 지정하면 출력되지 않습니다. ||
1780||<|3> {{{!}}}[br]{{{(부정)}}} ||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1781{\{\{#!if !(+a > 0 || +b > 0)
1782{{{@}}}a{{{@}}}와 {{{@}}}b{{{@}}}은 모두 0 이하입니다.}\}\} }}} ||-5와 -7은 모두 0 이하입니다. ||
1783||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''호출''' ||<-5>{{{[include(틀:논리 연산, a=-5, b=-7)]}}}||
1784||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''해설''' ||<-5>{{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1785{{{a > 0}}}}}}은 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1786{{{false}}}}}}, {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1787{{{b > 0}}}}}}도 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1788{{{false}}}}}}, 따라서 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1789{{{a > 0 || b > 0}}}}}}는 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1790{{{false}}}}}} 입니다. {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1791{{{!false}}}}}}는 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1792{{{true}}}}}}이므로 출력됩니다. ||
1793
1794'''{{{#red 주의}}}''': &&(논리곱), ||(논리합) 연산자와 &(비트곱), |(비트합) 연산자의 혼동을 주의하세요. 서로 동작이 다릅니다.
1795
1796=== 산술 연산 ===
1797||<tablewidth=100%><tablebgcolor=transparent><rowbgcolor=#f5f5f5,#2d2f34><width=10%> '''유형''' ||<-5><width=45%> '''구문''' ||<width=45%> '''출력''' ||
1798||<|3> {{{+}}}[br]{{{(더하기)}}} ||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1799{\{\{#!if (+num) + 3 == 10
1800{{{@}}}num{{{@}}}에 3을 더한 값은 10입니다.}\}\} }}} ||{{{#!if 7 + 3 == 10
18017에 3을 더한 값은 10입니다.}}} ||
1802||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''호출''' ||<-5>{{{[include(틀:산술 연산, num=7)]}}}||
1803||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''해설''' ||<-5>{{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1804{{{num}}}}}} 변수의 값이 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1805{{{7}}}}}}인 경우 7+3=10이므로 조건이 참이 되어 출력됩니다. ||
1806||<|3> {{{-}}}[br]{{{(빼기)}}} ||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1807{\{\{#!if (+num) - 3 == 7
1808{{{@}}}num{{{@}}}에서 3을 뺀 값은 7입니다.}\}\} }}} ||{{{#!if 10 - 3 == 7
180910에서 3을 뺀 값은 7입니다.}}} ||
1810||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''호출''' ||<-5>{{{[include(틀:산술 연산, num=10)]}}}||
1811||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''해설''' ||<-5>{{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1812{{{num}}}}}} 변수의 값이 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1813{{{10}}}}}}인 경우 10-3=7이므로 조건이 참이 되어 출력됩니다. ||
1814||<|3> {{{*}}}[br]{{{(곱하기)}}} ||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1815{\{\{#!if (+num) * 5 == 10
1816{{{@}}}num{{{@}}}에 5를 곱한 값은 10입니다.}\}\} }}} ||{{{#!if 2 * 5 == 10
18172에 5를 곱한 값은 10입니다.}}} ||
1818||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''호출''' ||<-5>{{{[include(틀:산술 연산, num=2)]}}}||
1819||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''해설''' ||<-5>{{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1820{{{num}}}}}} 변수의 값이 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1821{{{2}}}}}}인 경우 2×5=10이므로 조건이 참이 되어 출력됩니다. ||
1822||<|3> {{{/}}}[br]{{{(나누기)}}} ||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1823{\{\{#!if (+num) / 5 == 2
1824{{{@}}}num{{{@}}}을 5로 나눈 값은 2입니다.}\}\} }}} ||{{{#!if 10 / 5 == 2
182510을 5로 나눈 값은 2입니다.}}} ||
1826||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''호출''' ||<-5>{{{[include(틀:산술 연산, num=10)]}}}||
1827||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''해설''' ||<-5>{{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1828{{{num}}}}}} 변수의 값이 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1829{{{10}}}}}}인 경우 10÷5=2이므로 조건이 참이 되어 출력됩니다. ||
1830||<|3> {{{%}}}[br]{{{(나머지)}}} ||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1831{\{\{#!if (+num) % 5 == 3
1832{{{@}}}num{{{@}}}을 5로 나눈 나머지는 3입니다}\}\} }}} ||{{{#!if 28 % 5 == 3
183328을 5로 나눈 나머지는 3입니다.}}} ||
1834||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''호출''' ||<-5>{{{[include(틀:산술 연산, num=28)]}}}||
1835||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''해설''' ||<-5>{{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1836{{{num}}}}}} 변수의 값이 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1837{{{28}}}}}}인 경우 28을 5로 나눈 나머지는 3이므로 조건이 참이 되어 출력됩니다. ||
1838||<|9> {{{**}}}[br]{{{(거듭제곱)}}} ||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1839{\{\{#!if (+num) ** 3 == 1728.0
1840{{{@}}}num{{{@}}}를 세제곱한 값은 1728입니다.}\}\} }}} ||{{{#!if 12 ** 3 == 1728.0
184112를 세제곱한 값은 1728입니다.}}} ||
1842||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''호출''' ||<-5>{{{[include(틀:산술 연산, num=12)]}}}||
1843||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''해설''' ||<-5>{{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1844{{{num}}}}}} 변수의 값이 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1845{{{12}}}}}}인 경우 12^^3^^=1728이므로 조건이 참이 되어 출력됩니다. ||
1846||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1847{\{\{#!if (+num) ** 0.5 == 12.0
1848{{{@}}}num{{{@}}}의 양의 제곱근은 12입니다.}\}\} }}} ||{{{#!if 144 ** 0.5 == 12.0
1849144의 양의 제곱근은 12입니다.}}} ||
1850||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''호출''' ||<-5>{{{[include(틀:산술 연산, num=144)]}}}||
1851||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''해설''' ||<-5>{{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1852{{{num}}}}}} 변수의 값이 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1853{{{144}}}}}}인 경우 √144=12이므로 조건이 참이 되어 출력됩니다. ||
1854||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1855{\{\{#!if (+num) ** -2 == 0.25
1856{{{@}}}num{{{@}}}를 -2제곱한 값은 0.25입니다.}\}\} }}} ||{{{#!if 2 ** -2 == 0.25
18572를 -2제곱한 값은 0.25입니다.}}} ||
1858||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''호출''' ||<-5>{{{[include(틀:산술 연산, num=2)]}}}||
1859||<bgcolor=#f5f5f5,#2d2f34><width=9%><keepall> '''해설''' ||<-5>{{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1860{{{num}}}}}} 변수의 값이 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1861{{{2}}}}}}인 경우 ¼=0.25이므로 조건이 참이 되어 출력됩니다. ||
1862
1863나눗셈 계산 시, 정수부분만을 구하는 나눗셈임에 주의하세요. 바꾸어 말하면 곱셈의 역연산이 아님을 의미합니다.
1864||<tablebgcolor=transparent><rowbgcolor=#f5f5f5,#2d2f34> '''구문''' || '''출력''' ||
1865||<nopad>{{{{{{#!if -21 / 6 == -3
1866-21에는 6이 -3개 들어갑니다.}}}}}}||{{{#!if -21 / 6 == -3
1867-21에는 6이 -3개 들어갑니다.}}}||
1868||<nopad>{{{{{{#!if -21 / -3 == 7
1869-21에는 -3이 7개 들어갑니다.}}}}}}||{{{#!if -21 / -3 == 7
1870-21에는 -3이 7개 들어갑니다.}}}||
1871||<nopad>{{{{{{#!if -21 / 6 == -3.5
1872-21에는 6이 -3.5개 들어갑니다.}}}}}}||{{{#!if -21 / 6 == -3.5
1873-21에는 6이 -3.5개 들어갑니다.}}}||
1874
1875이로 인해 일반적인 사칙 연산의 [[혼합 계산]]과 다르게 곱셈과 나눗셈의 우선순위가 동등하지 않게 됩니다. 일반적으로 파스 트리가 왼쪽에서 만들어짐에 주의하세요.
1876||<tablebgcolor=transparent><rowbgcolor=#f5f5f5,#2d2f34> '''구문''' || '''출력''' ||
1877||<nopad>{{{{{{#!if 2 * (3 / 4) != 2 * 3 / 4
1878좌변은 0, 우변은 1로 계산됩니다.}}}}}}||{{{#!if 2 * (3 / 4) != 2 * 3 / 4
1879좌변은 0, 우변은 1로 계산됩니다.}}}||
1880
1881이를 피하기 위해서는, 연산자의 좌측 또는 우측에 부동소수점 자료형을 넣어 타입 변환을 발생시키면 해결할 수 있습니다.
1882||<tablebgcolor=transparent><rowbgcolor=#f5f5f5,#2d2f34> '''구문''' || '''출력''' ||
1883||<nopad>{{{{{{#!if -21 / 6.0 == -3.5
1884-21.0에는 6.0이 -3.5개 들어갑니다.}}}}}}||{{{#!if -21 / 6.0 == -3.5
1885-21.0에는 6.0이 -3.5개 들어갑니다.}}}||
1886||<nopad>{{{{{{#!if -21.0 / 6 == -3.5
1887-21.0에는 6.0이 -3.5개 들어갑니다.}}}}}}||{{{#!if -21.0 / 6 == -3.5
1888-21.0에는 6.0이 -3.5개 들어갑니다.}}}||
1889
1890거듭제곱 연산을 사용할 경우, 그 결과값은 float 타입으로 나옵니다. 비교 연산자는 양변에 주어진 값의 타입이 같을 때만 동작하므로, 한쪽 값이 단순 integer일 경우, integer를 float로, 또는 float를 integer로 캐스팅해야 합니다. integer를 float로 캐스팅하는 가장 간단한 방법은 0.0을 더하는 방법일 것입니다.
1891||<tablebgcolor=transparent><rowbgcolor=#f5f5f5,#2d2f34> '''구문''' || '''출력''' ||
1892||<nopad>{{{{{{#!if 2 ** 16 == 65536 + 0.0
18932 ** 16과 65536은 같습니다.}}}}}}||{{{#!if 2 ** 16 == 65536 + 0.0
18942 ** 16과 65536은 같습니다.}}}||
1895
1896나머지 연산을 수행할 경우, 그 결과값은 나머지 연산의 정의에 의해 반드시 integer 타입으로 나옵니다. 이는 다시 말해 float에 나머지 연산을 수행해 integer로 캐스팅할 수 있음을 의미합니다. 단, 피제수를 [math(k)]로 나눈 나머지는 항상 [math(k)]보다 작으므로, 기대 범위를 확실히 예상하고 있지 않다면 사용하기 어렵습니다. 예를 들어, 다음과 같은 경우 [math(\log_{10}2^{16}<5)]이므로 결과값이 적어도 100,000보다는 작을 것을 예상할 수 있습니다.
1897||<tablebgcolor=transparent><rowbgcolor=#f5f5f5,#2d2f34> '''구문''' || '''출력''' ||
1898||<nopad>{{{{{{#!if 2 ** 16 % 100000 == 65536
18990.0을 더하지 않아도 우변에서 바로 비교가 가능합니다.}}}}}}||{{{#!if 2 ** 16 % 100000 == 65536
19000.0을 더하지 않아도 우변에서 바로 비교가 가능합니다.}}}||
1901
1902=== 비트 연산 ===
1903[[비트 연산]]에 대한 기본적인 개념이 있다면 더 쉽게 이해할 수 있습니다.
1904||<tablewidth=100%><tablebgcolor=transparent><rowbgcolor=#f5f5f5,#2d2f34><width=15%> '''유형''' ||<width=45%> '''구문''' ||<width=40%> '''출력''' ||
1905|| {{{~}}}[br](비트 부정) ||{{{#!wiki style="display: inline; font-family: monospace;"
1906{\{\{#!if ~1234 == -1235
19071234의 비트를 뒤집은 값은 -1235입니다.}\}\} }}}||{{{#!if ~1234 == -1235
19081234의 비트를 뒤집은 값은 -1235입니다.}}}||
1909|| {{{<<}}}[br](좌측 시프트) ||{{{#!wiki style="display: inline; font-family: monospace;"
1910{\{\{#!if 12 << 2 == 48
191112(1100,,2,,)을 왼쪽으로 2번 민 값은 48(110000,,2,,)입니다.}\}\} }}}||{{{#!if 12 << 2 == 48
191212(1100,,2,,)을 왼쪽으로 2번 민 값은 48(110000,,2,,)입니다.}}}||
1913||<|2> {{{>>}}}[br](우측 시프트) ||{{{#!wiki style="display: inline; font-family: monospace;"
1914{\{\{#!if 12 >> 2 == 3
191512(1100,,2,,)을 오른쪽으로 2번 민 값은 3(11,,2,,)입니다.}\}\} }}}||{{{#!if 12 >> 2 == 3
191612(1100,,2,,)을 오른쪽으로 2번 민 값은 3(11,,2,,)입니다.}}}||
1917||{{{#!wiki style="display: inline; font-family: monospace;"
1918{\{\{#!if -12 >> 2 == -3
1919-12(111...0100,,2,,)를 오른쪽으로 2번 민 값은 -3(111...01,,2,,)입니다.}\}\} }}}||{{{#!if 12 >> 2 == 3
1920-12(111...0100,,2,,)를 오른쪽으로 2번 민 값은 -3(111...01,,2,,)입니다.}}}||
1921|| {{{&}}}[br](비트곱) ||{{{#!wiki style="display: inline; font-family: monospace;"
1922{\{\{#!if (5 & 6) == 4
19235(101,,2,,)와 6(110,,2,,)의 각 자리가 모두 1인 값을 1로 바꾸면 4(100,,2,,)입니다.}\}\} }}}||{{{#!if (5 & 6) == 4
19245(101,,2,,)와 6(110,,2,,)의 각 자리가 모두 1인 값을 1로 바꾸면 4(100,,2,,)입니다.}}}[*우선순위 이 연산자는 {{{==}}}보다 우선순위가 낮기 때문에 괄호를 하지 않고 {{{a □ b == c}}}처럼 표기할 경우 {{{a □ (b == c)}}}와 같은 순서로 계산됩니다.]||
1925|| {{{|}}}[br](비트합) ||{{{#!wiki style="display: inline; font-family: monospace;"
1926{\{\{#!if (5 | 6) == 7
19275(101,,2,,)와 6(110,,2,,)의 각 자리가 하나라도 1인 값을 1로 바꾸면 7(111,,2,,)입니다.}\}\} }}}||{{{#!if (5 | 6) == 7
19285(101,,2,,)와 6(110,,2,,)의 각 자리가 하나라도 1인 값을 1로 바꾸면 7(111,,2,,)입니다.}}}[*우선순위]||
1929|| {{{^}}}[br](배타적 비트합) ||{{{#!wiki style="display: inline; font-family: monospace;"
1930{\{\{#!if (5 ^ 6) == 3
19315(101,,2,,)와 6(110,,2,,)의 각 자리가 다른 값을 1로 바꾸면 3(11,,2,,)입니다.}\}\} }}}||{{{#!if (5 ^ 6) == 3
19325(101,,2,,)와 6(110,,2,,)의 각 자리가 다른 값을 1로 바꾸면 3(11,,2,,)입니다.}}}[*우선순위]||
1933
1934우측 시프트의 경우, 논리 시프트를 구분하지 않고 항상 산술 시프트로만 동작합니다.
1935
1936논리 시프트 연산을 취하기 위한 부호 없는 우측 시프트 연산자({{{a >>> b}}})는 지원하지 않으므로, {{{a >> b & 0x7fffffffffffffff >> b - 1}}}와 같이 대체 문법을 사용해야 합니다.[* {{{b == 0}}}인 경우 논리 시프트를 적용한 결과와 다르나, 비트 시프트를 하는 의미가 없으므로 사용하지 않습니다.]
1937
1938float 자료형인 if 문법 내 변수를 정수부만 잘라 형변환하려면 비트합 연산자를 이용할 수 있습니다. 이는 비트합 연산자가 피연산자를 정수로 형변환하는 특성과 '비트합 0' 연산은 기존 값에 영향을 주지 않는다는 특성을 이용한 것입니다.
1939
1940||{{{#!wiki style="display: inline; font-family: monospace;"
1941{\{\{#!if d = 6.700 | 0
19426.700의 정수부는 {{{#!html &#64;d&#64;}}}입니다.}\}\} }}} ||{{{#!if d = 6.700 | 0
19436.700의 정수부는 @d@입니다.}}}||
1944
1945=== 함수, 메서드 및 속성 ===
1946함수는 수학의 함수처럼 입력값을 받고 정해진 출력값을 반환합니다.
1947
1948메서드는 어떤 값과 연결되어 있는 함수의 일종입니다. 속성은 어떤 값에 대한 이미 정해진 정보를 나타냅니다. 메서드나 속성에 접근할 때는 변수의 이름을 쓰지만, 메서드와 속성 자체는 값에 연결된 것임을 유의해야 합니다.
1949
1950따라서 변수의 값이 {{{null}}}인 상태에서 메서드나 속성에 접근하려고 하면 예외가 발생하게 됩니다. 예를 들어 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1951{{{true || fruit.length == 2}}}}}}는 연산 법칙에 따라 언제나 참값이지만 변수 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1952{{{fruit}}}}}}에 값이 전달되지 않은 상태라면 의도와는 다르게 내용이 출력되지 않습니다. 이러한 예외를 방지하려면 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1953{{{fruit?.length}}}}}}처럼 옵셔널 체이닝 연산자를 사용하거나, {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1954{{{fruit && fruit.trim()}}}}}}처럼 단축 평가를 이용하거나, {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1955{{{??=}}}}}} 또는 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1956{{{||=}}}}}} 연산자를 이용하여 기본값을 적용해주는 것이 좋습니다.
1957
1958문자열 타입의 메서드와 속성은 아래와 같습니다.
1959||<tablewidth=100%><tablebgcolor=transparent><rowbgcolor=#f5f5f5,#2d2f34><width=15%> '''유형''' ||<-5><width=45%> '''구문''' ||<width=40%> '''출력''' ||
1960##
1961||<|15> {{{length}}} ||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1962\{\{\{#!if fruit.length == 2
1963문자열의 길이가 2입니다.\}\}\} }}} ||문자열의 길이가 2입니다. ||
1964||<bgcolor=#f5f5f5,#2d2f34><width=9%> '''호출''' ||<-5>{{{[include(틀:속성, fruit=멜론)]}}}||
1965||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>문자형 변수 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1966{{{fruit}}}}}}의 값의 길이가 2인 경우에만 출력됩니다.||
1967||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1968\{\{\{#!if fruit.length == 0
1969빈 문자열입니다.\}\}\} }}} ||빈 문자열입니다. ||
1970||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:속성, fruit=,)]}}}||
1971||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>빈 문자열의 길이는 0입니다.||
1972||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1973\{\{\{#!if fruit.length == 4
1974문자열의 길이가 4입니다.\}\}\} }}} ||문자열의 길이가 4입니다. ||
1975||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:속성, fruit=🍈멜론)]}}}||
1976||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>U+0000부터 U+FFFF까지는 한 문자당 길이가 1이지만 U+10000부터는 2로 간주됩니다.||
1977||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1978{{{@}}}fruit{{{@}}}\{\{\{#!if josa = (fruit[fruit.length - 1] - 0xac00) % 28
1979이\}\}\}\{\{\{#!if !josa
1980가\}\}\} 입력되었습니다. }}} ||사과가 입력되었습니다. ||
1981||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:속성, fruit=사과)]}}}||
1982||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>{{{length}}} 속성을 이용해 조사를 구분할 수 있습니다. 본 구문은 한글로 끝나는 문자열만 판단할 수 있는 간단한 구조로 되어 있습니다. ||
1983||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1984{{{@}}}fruit{{{@}}}\{\{\{#!if var0 = josa != null
1985{{{@}}}josa{{{@}}}\}\}\}\{\{\{#!if var1 = !var0 && (fruit[fruit.length - 1] < 0xac00 || fruit[fruit.length - 1] > 0xd7af)
1986이(가)\}\}\}\{\{\{#!if var2 = !(var0 || var1) && (fruit[fruit.length - 1] - 0xac00) % 28
1987이\}\}\}\{\{\{#!if !(var0 || var1 || var2)
1988가\}\}\} 입력되었습니다. }}} ||apple이(가) 입력되었습니다. ||
1989||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:속성, fruit=apple)]}}}||
1990||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>받침이 있는 한글은 '이', 받침이 없는 한글은 '가', 그 외 문자는 '이(가)'가 출력됩니다. 사용자가 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
1991{{{josa}}}}}} 매개변수를 통해 조사를 수동으로 입력할 수도 있습니다. ||
1992##
1993||<|9> {{{indexOf()}}} ||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
1994\{\{\{#!if fruit.indexOf("멜론") != -1
1995{{{@}}}fruit{{{@}}} 중 멜론이 포함되어 있습니다.\}\}\} }}} ||사과, 바나나, 멜론, 오렌지 중 멜론이 포함되어 있습니다. ||
1996||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:메서드, fruit=사과\, 바나나\, 멜론\, 오렌지)]}}}||
1997||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>{{{indexOf()}}}는 문자열에서 주어진 값과 일치하는 최초의 인덱스[* 문자열의 각 문자의 순서를 인덱스라고 하며, 첫 번째 문자를 0으로 시작해서 마지막 문자까지 0, 1, 2, 3 ...의 순서를 가집니다.{{{#!wiki
1998|| 0 || 1 || 2 || 3 || 4 || 5 || 6 || 7 || 8 || 9 || 10 || 11 || 12 || 13 || 14 || 15 ||
1999|| 사 || 과 || , || || 바 || 나 || 나 || , || || 멜 || 론 || , || || 오 || 렌 || 지||}}}]를, 일치하지 않으면 -1을 반환하는 메서드입니다. 문자형 변수 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2000{{{fruit}}}}}}의 값에 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2001{{{멜론}}}}}}이 포함되어 있는 경우에만 출력됩니다.||
2002||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
2003\{\{\{#!if fruit.indexOf("멜론") == -1
2004{{{@}}}fruit{{{@}}} 중 멜론이 포함되어 있지 않습니다.\}\}\} }}} ||사과, 바나나, 멜론, 오렌지 중 멜론이 포함되어 있지 않습니다. ||
2005||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:메서드, fruit=사과\, 바나나\, 오렌지)]}}}||
2006||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>문자형 변수 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2007{{{fruit}}}}}}의 값에 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2008{{{멜론}}}}}}이 포함되어 있지 않은 경우에만 출력됩니다. ||||
2009||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
2010\{\{\{#!if fruit.indexOf("멜론", 11) != -1
201111번째 인덱스부터 순차적으로 탐색을 진행하였습니다. {{{@}}}fruit{{{@}}} 중 멜론이 포함되어 있습니다.\}\}\} }}} || ||
2012||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:메서드, fruit=사과\, 바나나\, 멜론\, 오렌지)]}}}||
2013||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>문자열에서 '멜'과 '론'은 각각 9번째, 10번째 인덱스에 위치하고 있으나 선택적 값이 {{{11}}}로 입력됨에 따라 11번째 인덱스부터 순차적으로 탐색을 시작하였으므로 출력되지 않습니다. ||
2014##
2015||<|3> {{{lastIndexOf()}}} ||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
2016\{\{\{#!if fruit.lastIndexOf("멜론", 11) == 10
201711번째 인덱스부터 역순으로 탐색을 진행하였습니다. 멜론이 10번째 인덱스에서 최초로 확인됩니다.\}\}\} }}} ||11번째 인덱스부터 역순으로 탐색을 진행하였습니다. 멜론이 10번째 인덱스에서 최초로 확인됩니다. ||
2018||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:메서드, fruit=사과\, 바나나\, 멜론\, 오렌지)]}}}||
2019||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>순차적으로 탐색하는 {{{indexOf()}}}와 달리 역순으로 탐색합니다. ||
2020##
2021||<|3> {{{startsWith()}}} ||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
r2
NightZ
2022\{\{\{#!if doc.startsWith("엔트리위키/")
2023\[\[{{{@}}}doc{{{@}}}\]\] 문서는 \[\[엔트리위키\]\]의 하위 문서입니다.\}\}\} }}} ||[[엔트리위키/역사]] 문서는 [[엔트리위키]]의 하위 문서입니다. ||
2024||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:메서드, doc=엔트리위키/역사)]}}}||
r1
NightZ

(새 문서) 		2025||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>문자형 변수 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2026{{{doc}}}}}}의 값이 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
r2
NightZ
2027{{{엔트리위키/}}}}}}로 시작하는 경우에만 출력됩니다.||
r1
NightZ

(새 문서) 		2028##
2029||<|3> {{{endsWith()}}} ||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
2030\{\{\{#!if filename.endsWith(".svg") || filename.endsWith(".SVG")
2031\[\[:파일:{{{@}}}filename{{{@}}}|{{{@}}}filename{{{@}}}\]\]의 확장자는 svg입니다.\}\}\}}}} ||[[:파일:상위 문서 아이콘.svg|상위 문서 아이콘.svg]]의 확장자는 svg입니다. ||
2032||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:메서드, filename=상위 문서 아이콘.svg)]}}}||
2033||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>문자형 변수 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2034{{{filename}}}}}}의 값이 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2035{{{.svg}}}}}} 또는 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2036{{{.SVG}}}}}}로 끝나는 경우에만 출력됩니다.||
2037##
2038||<|9> {{{substring()}}} ||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
2039\{\{\{#!if str.substring(7, 12) == 'World'
2040'{{{@}}}str{{{@}}}' (이)라는 문자열의 7~11번째 인덱스는 'World'라는 글자입니다.\}\}\}}}} ||Hello, World! (이)라는 문자열의 7~11번째 인덱스는 'World'라는 글자입니다. ||
2041||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:메서드, str=Hello\, World!)]}}}||
2042||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>문자형 변수 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2043{{{str}}}}}}의 값의 7~11인덱스 범위의 부분 문자열이 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2044{{{World}}}}}}인 경우에만 출력됩니다. ||
2045||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
2046\{\{\{#!if str.substring(12, 7) == ''
2047start 값이 end보다 크다면 빈 문자열을 반환합니다.\}\}\}}}} || ||
2048||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:메서드, str=Hello\, World!)]}}}||
2049||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>{{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2050{{{substring}}}}}} 함수의 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2051{{{start}}}}}}의 값이 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2052{{{end}}}}}} 값보다 크다면 빈 문자열만을 반환하게 됩니다. ||
2053||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
2054\{\{\{#!if str.substring(7) == 'World!'
2055'{{{@}}}str{{{@}}}' (이)라는 문자열의 7번째 이후 인덱스는 'World!'라는 글자입니다.\}\}\}}}} ||Hello, World! (이)라는 문자열의 7번째 이후 인덱스는 'World!'라는 글자입니다. ||
2056||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:메서드, str=Hello\, World!)]}}}||
2057||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>{{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2058{{{end}}}}}} 값을 입력하지 않을 시 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2059{{{start}}}}}} 값 이후의 모든 문자열을 반환합니다. ||
2060##
2061||<|3> {{{trim()}}} ||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
2062\{\{\{#!if str.substring(6).trim() == 'World!'
2063'{{{@}}}str{{{@}}}' (이)라는 문자열의 6번째 이후 인덱스는 양 끝 공백을 제외하고 'World!'라는 글자입니다.\}\}\}}}} ||Hello, World! (이)라는 문자열의 6번째 이후 인덱스는 양 끝 공백을 제외하고 'World!'라는 글자입니다. ||
2064||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:메서드, str=Hello\, World!)]}}}||
2065||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>문자열의 양 끝 공백을 제거합니다. 기본적으로 include 호출로 매개변수를 전달할 시에 값의 좌우 공백이 제거되므로 활용도는 높지 않지만, {{{substring()}}} 등으로 문자열을 오려낸 뒤에 기존의 중간 공백을 제거하고 싶을 때 사용할 수도 있습니다. ||
2066##
2067||<|6> {{{substr()}}} ||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
2068\{\{\{#!if str.substr(7, 5) == 'World'
2069'{{{@}}}str{{{@}}}' (이)라는 문자열의 7번째 이후 5 번째까지의 인덱스는 'World'라는 글자입니다.\}\}\}}}} ||Hello, World! (이)라는 문자열의 7번째 이후 3 번째까지의 인덱스는 'World'라는 글자입니다. ||
2070||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:메서드, str=Hello\, World!)]}}}||
2071||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>문자형 변수 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2072{{{str}}}}}}의 값의 7번째 인덱스에서 그 뒤 5째 인덱스인 11번째 인덱스까지의 범위의 부분 문자열이 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2073{{{World}}}}}}인 경우에만 출력됩니다.||
2074##
2075||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
2076\{\{\{#!if str.substr(7) == 'World!'
2077'{{{@}}}str{{{@}}}' (이)라는 문자열의 7번째 이후 인덱스는 'World!'라는 글자입니다.\}\}\}}}} ||Hello, World! (이)라는 문자열의 7번째 이후 인덱스는 'World!'라는 글자입니다. ||
2078||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:메서드, str=Hello\, World!)]}}}||
2079||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>{{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2080{{{end}}}}}} 값을 입력하지 않을 시 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2081{{{start}}}}}} 값 이후의 모든 문자열을 반환합니다. ||
2082
2083toString은 null 외의 모든 값에 대해 동작합니다.
2084||<tablewidth=100%><tablebgcolor=transparent><rowbgcolor=#f5f5f5,#2d2f34><width=15%> '''유형''' ||<-5><width=45%> '''구문''' ||<width=40%> '''출력''' ||
2085##
2086||<|3> {{{toString()}}} ||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
2087\{\{\{#!if l=number.toString().length
2088{{{@}}}number{{{@}}}는 {{{@}}}l{{{@}}}자입니다.\}\}\}}}} ||수 12345는 5자입니다. ||
2089||<bgcolor=#f5f5f5,#2d2f34><width=9%> '''호출''' ||<-5>{{{[include(틀:메서드, number=12345)]}}}||
2090||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>변수 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2091{{{number}}}}}}의 값을 문자열 형태로 변환한 뒤, length 메서드를 통해 길이를 출력합니다.||
2092
2093지원되는 전역 함수는 아래와 같습니다.
2094||<tablewidth=100%><tablebgcolor=transparent><rowbgcolor=#f5f5f5,#2d2f34><width=15%> '''유형''' ||<-5><width=45%> '''구문''' ||<width=40%> '''출력''' ||
2095##
2096||<|3> {{{parseInt()}}} ||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
2097\{\{\{#!if int=parseInt(number, radix)
2098{{{@}}}radix=10{{{@}}}진법 숫자 {{{@}}}number{{{@}}}는 10진법으로 {{{@}}}int{{{@}}}입니다.\}\}\}}}} ||16진법 숫자 0x1dff는 10진수로 7679입니다. ||
2099||<bgcolor=#f5f5f5,#2d2f34><width=9%> '''호출''' ||<-5>{{{[include(틀:진법변환, number=0x1dff, radix=16)]}}}||
2100||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>문자열 변수 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2101{{{number}}}}}}의 값을 변수 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2102{{{radix}}}}}}에서 지정한 진법으로 읽어 정수로 반환합니다. 지정하지 않으면 10진법으로 해석합니다. ||
2103
2104=== 배열과 객체 ===
2105배열은 값을 정의한 순서대로 나열한 것이며, 객체는 속성 이름과 값이 짝을 이룬 것입니다. 모든 배열은 한번 정의된 이후에는 각 인덱스를 속성 이름으로 하는 객체로 취급됩니다.
2106
2107||<tablewidth=100%><tablebgcolor=transparent><rowbgcolor=#f5f5f5,#2d2f34><width=15%> '''유형''' ||<-5><width=45%> '''구문''' ||<width=40%> '''출력''' ||
2108##
2109||<|3> 배열 ||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
2110\{\{\{#!if fruits = ['사과', '배', '참외'], fruit = fruits[index]
2111{{{@}}}fruit{{{@}}}를 먹었습니다.\}\}\} }}} ||배를 먹었습니다. ||
2112||<bgcolor=#f5f5f5,#2d2f34><width=9%> '''호출''' ||<-5>{{{[include(틀:배열, index=1)]}}}||
2113||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>인덱스는 0부터 시작하므로, {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2114{{{fruits}}}}}}에서 1번 인덱스에 해당하는 배가 선택됩니다. ||
2115||<|3> 객체 ||<-5>{{{#!wiki style="display: inline; font-family: monospace;"
2116\{\{\{#!if glycemicIndexMap = {'사과': 36, '바나나': 51, '오렌지': 43}, glycemicIndex = glycemicIndexMap[fruit]
2117{{{@}}}fruit{{{@}}}의 혈당지수는 {{{@}}}glycemicIndex{{{@}}}입니다.\}\}\} }}} ||바나나의 혈당지수는 51입니다. ||
2118||<bgcolor=#f5f5f5,#2d2f34> '''호출''' ||<-5>{{{[include(틀:객체, fruit=바나나)]}}}||
2119||<bgcolor=#f5f5f5,#2d2f34> '''해설''' ||<-5>객체 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2120{{{glycemicIndexMap}}}}}}에서 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2121{{{fruit}}}}}} 속성을 찾아 {{{#!wiki style="display: inline; padding: .125rem .25rem; background: #bfe9d5; border-radius: .25rem; font-size: .875rem;" dark-style="background: #383b40;"
2122{{{glycemicIndex}}}}}} 변수에 저장합니다. ||
2123
2124배열의 길이나 객체의 속성의 개수는 구할 수 없습니다.
2125
2126== [[구문 강조]] (syntax highlighting) ==
2127[include(틀:상세 내용, 문서명=구문 강조)]
2128기본적인 사용법은 다음과 같습니다.
2129{{{{{{#!syntax 언어명
2130코드}}}}}}
2131프로그래밍 언어를 입력할 때, [[텍스트 에디터]]에 입력한 것처럼 보기 좋게 해줍니다.
2132프로그래밍 언어의 이름과 코드 내용을 원하는 것으로 변경하여 사용하실 수 있습니다.
2133
2134'언어명' 부분에 해당 언어 명칭을 아래와 같이 알파벳 소문자 형태로 작성하신 후 코드를 입력하시면 됩니다. 아래에 언급된 언어만 사용 가능합니다.
2135 * [[BASIC]] - {{{basic}}}
2136 * [[C언어|C]], [[C++]] - {{{cpp}}}
2137 * [[C\#]] - {{{csharp}}}
2138 * [[CSS]] - {{{css}}}
2139 * [[Erlang]] - {{{erlang}}}
2140 * [[Go(프로그래밍 언어)|Go]] - {{{go}}}
2141 * [[HTML]] - {{{html}}}
2142 * [[Java]] - {{{java}}}
2143 * [[JavaScript]] - {{{javascript}}}
2144 * [[JSON]] - {{{json}}}
2145 * [[Kotlin]] - {{{kotlin}}}
2146 * [[LISP]] - {{{lisp}}}
2147 * [[Lua]] - {{{lua}}}
2148 * [[markdown]] - {{{markdown}}}
2149 * [[Objective-C]] - {{{objectivec}}}
2150 * [[Perl]] - {{{perl}}}
2151 * [[PHP]] - {{{php}}}
2152 * [[PowerShell]] - {{{powershell}}}
2153 * [[Python]] - {{{python}}}
2154 * [[Ruby]] - {{{ruby}}}
2155 * [[Rust(프로그래밍 언어)|Rust]] - {{{rust}}}
2156 * [[sh(실행파일)|sh]] - {{{sh}}}
2157 * [[SQL]] - {{{sql}}}
2158 * [[Swift]] - {{{swift}}}
2159 * [[TypeScript]] - {{{typescript}}}
2160 * [[XML]] - {{{xml}}}
2161
r2
NightZ
2162[각주][include(틀:문서 가져옴, title=엔트리위키:문법 도움말/심화/HTML, version=49, uuid=49c171dd-bbef-4a52-9ce4-d14ed497f804)]